Mermaid
글로 쓰면 그려지는 다이어그램
해결하는 문제
흐름도와 조직도를 그리는 데 시간이 오래 걸린다.
간단한 텍스트 문법으로 흐름도, 순서도, 간트 차트를 쓰면 브라우저가 그림으로 바꿉니다. AI가 쓰기 가장 쉬운 그림 언어입니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것Mermaid 텍스트
브라우저가 하는 일문법을 해석해 SVG 도형 배치
나오는 것흐름도·간트 차트 그림
쓰는 브라우저 기술
SVGDOM
라이브러리와 모델
Mermaid
바꿀 수 있는 옵션
- 테마
- 방향 (위→아래, 왼→오)
- SVG·PNG 내보내기
자주 막히는 곳
- 문법 한 글자 오류로 그림 전체가 안 그려진다
- 노드가 많으면 배치가 복잡해진다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 업무 설명을 흐름도로 바꿔 주는 도우미
웹 서비스
- 절차 안내 페이지
피지컬 AI
- 장비 작동 순서도
넓히는 방법
- 회의록에서 AI가 흐름도 자동 생성
- 문서 편집기 미리보기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
Mermaid로 민원 처리 절차 흐름도를 그리는 HTML을 만들고, 왼쪽에 텍스트를 고치면 오른쪽 그림이 바로 바뀌게 해줘.
같은 분류의 능력
08 시각화·모션·인터랙션에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md