텍스트 → 순서도
Mermaid 문법을 입력하기만 하면 실시간으로 플로우 차트를 자동 생성. 서버 전송 없음 — 완전 브라우저 처리.
개요
「텍스트 → 순서도」는, Mermaid 문법이라고 불리는 심플한 텍스트 형식을 입력하기만 하면, 순서도나 상관도, 시퀀스 다이어그램 등 다양한 그림을 자동 생성하는 브라우저 툴입니다.
모든 처리는 Mermaid.js를 사용하여 브라우저 내에서 완료됩니다. 그림의 내용이 외부 서버로 전송되는 일은 없으므로, 기밀성이 높은 설계도나 업무 흐름도 안심하고 작성할 수 있습니다.
작성한 그림은 SVG(벡터 형식) 또는 PNG(비트맵 형식)로 즉시 저장 가능합니다. 앱 설치는 불필요하며, 브라우저만 있으면 누구나 즉시 이용할 수 있습니다.
사용법
코드 입력
왼쪽의 텍스트 영역에 Mermaid 문법으로 코드를 입력합니다. 샘플 코드가 처음부터 입력되어 있으니 참고해 주세요.
실시간으로 확인
오른쪽의 미리보기 영역에 그림이 실시간으로 표시됩니다. 구문 에러가 있는 경우에는 에러 메시지가 표시됩니다.
SVG / PNG 로 저장
「SVG 저장」 또는 「PNG 저장」 버튼을 클릭하면, 작성한 그림을 파일로서 디바이스에 저장할 수 있습니다.
용어집
- Mermaid.js
- 텍스트 기반의 문법에서 순서도나 그림을 자동 생성하는 JavaScript 라이브러리. GitHub의 Markdown에서도 공식 지원하고 있습니다.
- 순서도 (Flowchart)
- 처리의 흐름이나 절차를 그림으로 표현한 것. Mermaid에서는
graph TD(상하)나graph LR(좌우)로 작성합니다. - SVG (Scalable Vector Graphics)
- 해상도에 의존하지 않는 벡터 형식의 이미지 포맷. 확대해도 화질이 저하되지 않기 때문에 프레젠테이션이나 인쇄에 최적입니다.
- 노드 (Node)
- 순서도의 각 요소(사각형, 원 등)를 말함. Mermaid 문법에서는
A[텍스트]와 같이 정의합니다. - 엣지 (Edge)
- 노드 간을 연결하는 화살표나 선을 말함.
--> (화살표)나--- (선)으로 표현합니다. - 시퀀스 다이어그램 (Sequence Diagram)
- 여러 등장인물 간의 상호작용을 시계열로 나타낸 그림. Mermaid에서는
sequenceDiagram으로 작성합니다.
자주 묻는 질문
- Q.한국어 텍스트를 노드에 사용할 수 있나요?
- 네, Mermaid.js는 한국어를 포함한 유니코드 문자를 지원합니다. 노드 안에 "집계 처리"와 같은 한국어 텍스트를 작성할 수 있습니다.
- Q.그림이 벗어나서 잘리는 경우는 어떻게 해야 하나요?
- 미리보기 영역은 가로 스크롤을 지원합니다. 또한, graph LR(좌우)를 graph TD(상하)로 변경하는 등 레이아웃 방향을 변경하면 화면에 잘 들어가게 됩니다.
- Q.그림은 서버로 전송되나요?
- 아니요. 모든 렌더링 처리는 Mermaid.js를 사용하여 브라우저 내에서 완료됩니다. 입력한 그림의 내용이 외부로 전송되는 일은 없습니다.
- Q.SVG와 PNG의 차이점은 무엇인가요?
- SVG는 벡터 형식으로 확대/축소해도 화질이 저하되지 않습니다. 프레젠테이션・인쇄・웹 임베딩에 최적입니다. PNG는 비트맵 형식으로, 이미지로 붙여넣고 싶을 때 편리합니다.
- Q.순서도 이외의 그림도 만들 수 있나요?
- 네. Mermaid.js는 시퀀스 다이어그램(sequenceDiagram), 클래스 다이어그램(classDiagram), 간트 차트(gantt) 등 많은 그림 형식을 지원합니다.
- Q.저장한 그림을 나중에 편집할 수 있나요?
- 현재 버전에서는 입력한 코드가 저장되지 않습니다. 나중에 편집하고 싶은 경우, 텍스트 영역의 Mermaid 코드를 복사하여 로컬에 저장해 두세요.
활용 장면
시스템 설계서 작성
API의 호출 흐름이나 DB의 ER 다이어그램을 Mermaid로 작성하여, 문서에 임베딩할 때 유용합니다.
회의록・업무 흐름의 시각화
회의에서 결정된 워크플로우나 승인 흐름을 빠르게 그림으로 만들어, 팀과 공유하는 데 편리합니다.
프레젠테이션 자료에 그림 삽입
PowerPoint로 그림을 만드는 것이 번거로울 때, Mermaid로 빠르게 그림을 만들어 PNG로 저장한 후 슬라이드에 붙여넣을 수 있습니다.
학습・교육 자료의 도식화
알고리즘의 처리 흐름이나 역사의 연표를 순서도로 표현하여, 이해하기 쉬운 학습 자료를 작성할 수 있습니다.
Mermaid 문법
기본 순서도 (graph)
graph TD
A[시작] --> B{조건}
B -->|예| C[처리A]
B -->|아니요| D[처리B]
C --> E[종료]
D --> E 시퀀스 다이어그램 (sequenceDiagram)
sequenceDiagram 사용자->>서버: 로그인 요청 서버->>DB: 인증 확인 DB-->>서버: 결과 반환 서버-->>사용자: 로그인 성공
노드 형태의 종류
A[사각형] — 직사각형B(둥근사각) — 둥근 사각형C{마름모} — 조건 분기D((원)) — 원형E>비대칭] — 비대칭F[(DB)] — 데이터베이스Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.