대부분의 mermaid 에디터는 텍스트 상자와 미리보기만 줍니다. 이 에디터는 캔버스도 제공합니다. 클릭으로 블록을 추가하고, 화살표를 드래그하고, 영역별로 묶으면 mermaid 코드가 저절로 작성됩니다. 코드 탭으로 전환해 직접 편집하면 캔버스도 그대로 따라옵니다.
입력하는 대로 렌더링
진짜 mermaid 엔진이 마지막 입력 후 수백 밀리초 만에 다시 그립니다.
코드와 캔버스 동기화
어느 쪽을 수정해도 다른 쪽이 따라옵니다. 두 도구를 오가며 복사-붙여넣기할 필요가 없습니다.
14가지 노드 모양
사각형, 둥근 사각형, 알약형, 원, 다이아몬드, 데이터베이스, 육각형 등을 클릭 한 번으로.
무료, 가입 없음
체험판도 워터마크도 없습니다. 에디터는 바로 열립니다. 다이어그램이 여러 개 필요할 때만 로그인하세요.
비주얼 탭은 렌더링된 다이어그램 위에서 바로 작동하는 실제 에디터입니다. 노드를 클릭해 선택하고, 더블클릭으로 그 자리에서 이름을 바꾸고, 아무 곳이나 드래그해 화면을 이동하세요.
클릭으로 만들기블록을 추가하고 다른 블록을 향해 화살표를 그리고 라벨을 붙이세요. 시작하기 전에 외울 문법은 없습니다.
모양 선택결정 다이아몬드, 데이터베이스 원통, 서브루틴 등 14가지 mermaid 순서도 모양을 하나의 선택기에서.
자유로운 색상8가지 프리셋과 색상 선택기를 노드 하나 또는 영역 전체에 적용하세요.
코드 탭은 순수한 mermaid입니다. GitHub, GitLab, Notion, Obsidian이 이미 렌더링하는 그 문법 그대로이며, 여기에는 독자적인 포맷이 전혀 없습니다.
직접 작성하기mermaid를 직접 입력하면 바로 렌더링됩니다. 시작하기 좋은 예제 6가지가 준비되어 있습니다.
양방향 변환붙여넣은 순서도는 노드, 모양, 색상, 서브그래프까지 그대로 캔버스로 다시 해석됩니다.
모든 다이어그램 유형순서도, 시퀀스, 클래스, 상태, ER, 간트, 깃 그래프, 파이까지 — mermaid가 지원하는 무엇이든 미리보기에 렌더링됩니다.
아키텍처 다이어그램은 금방 화면 하나를 넘어섭니다. 팬, 줌, 그룹화 기능은 그런 상황과 싸우는 대신 애초에 그것을 위해 만들어졌습니다.
영역과 중첩블록을 서브그래프로 묶고, 영역 안에 영역을 중첩하고, 한 번의 동작으로 하위 트리 전체를 옮기세요.
2%부터 1600%까지 줌스크롤로 화면을 이동하고, ctrl-스크롤로 확대하거나, 버튼 하나로 다시 가운데로.
작업하는 대로 저장편집하는 동안 다이어그램은 브라우저에 자동 저장됩니다. 로그인하면 계정에 저장되어 어떤 기기에서든 이어서 사용할 수 있습니다.
아무것도 가두지 않습니다. 이미지를 가져가든, 소스를 가져가든, 문서에 바로 붙여넣을 Markdown 블록을 가져가든 자유입니다.
유료 결제 없음내보내기를 포함한 모든 기능이 무료입니다. 업그레이드할 유료 플랜 자체가 없습니다.
브라우저에서 렌더링됩니다렌더링은 브라우저에서 이루어집니다. 계정이 없으면 다이어그램은 브라우저를 벗어나지 않고, 계정이 있으면 저장된 문서가 어떤 기기로든 따라갑니다.
SVG, PNG, .mmd, .mdSVG 마크업을 복사하거나, 2배 해상도 PNG를 내려받거나, mermaid 소스를 저장하거나, 코드 블록으로 감싼 Markdown을 가져가세요.
다이어그램-as-코드 도구는 모든 것을 직접 손으로 작성하게 합니다. 드래그 앤 드롭 도구는 비교(diff)조차 할 수 없는 그림 하나를 줍니다. 이 에디터는 어느 한쪽을 택하길 거부합니다.
IQ Mermaid: 캔버스를 더블클릭하면 노드가 생깁니다. 문법은 나중에 배워도, 아예 안 배워도 됩니다.
일반적인 도구: 먼저 문법 레퍼런스를 읽거나, 텍스트 표현이 아예 없는 그리기 도구를 받아들여야 합니다.
IQ Mermaid: 순수한 mermaid — GitHub, GitLab, Notion이 그대로 렌더링하는 그 텍스트입니다.
일반적인 도구: 그 도구에서만 열리는 독자적인 파일입니다.
IQ Mermaid: 코드를 바꾸든 블록을 옮기든, 같은 다이어그램에서 양방향으로 작동합니다.
일반적인 도구: 한 방향뿐입니다. 코드 중심 도구엔 캔버스가 없고, 캔버스 중심 도구엔 소스가 없습니다.
IQ Mermaid: 무료 — 이메일조차 필요 없습니다.
일반적인 도구: 몇 개까지만 무료이고, 내보내기나 협업은 구독 뒤에 있습니다.
IQ Mermaid: 브라우저에, 또는 어떤 기기로든 따라가길 원하면 계정에 저장됩니다.
일반적인 도구: 누군가의 서버에 있는 계정, 그리고 거기 딸린 다이어그램들.
시작하려면 페이지만 열면 됩니다.
mermaid는 다이어그램을 위한 텍스트 문법입니다. 몇 줄로 노드와 화살표를 설명하면 렌더러가 그림을 그려줍니다. GitHub, GitLab, Notion, Obsidian은 Markdown 안에서 이를 렌더링하므로, mermaid 블록은 풀 리퀘스트나 위키 페이지에서도 그대로 읽을 수 있습니다.
네. SVG·PNG 내보내기를 포함한 모든 기능이 무료이며, 아무것도 만들지 않고 에디터를 사용할 수 있습니다. 선택적인 무료 계정을 만들면 저장되는 다이어그램이 늘어나고 기기 간 동기화가 됩니다. 유료 플랜은 없고 제한되는 기능도 없습니다.
아니요. 비주얼 탭에서 시작하세요. 캔버스를 더블클릭해 블록을 추가하고, 선택한 뒤 다른 블록으로 화살표를 그으면 됩니다. mermaid 코드는 자동으로 생성되며, 문법을 배우고 싶을 때 언제든 읽어볼 수 있습니다.
코드 탭은 순서도, 시퀀스, 클래스, 상태, 개체-관계, 간트, 깃 그래프, 파이 등 mermaid가 지원하는 모든 것을 렌더링합니다. 비주얼 캔버스는 그중 순서도를 다루는데, 대부분의 다이어그램이 여기에 해당합니다.
네. SVG 마크업을 클립보드에 복사하거나, SVG 파일을 내려받거나, 슬라이드와 문서용으로 2배 해상도 PNG를 내려받을 수 있습니다. mermaid 소스를 .mmd 파일이나 코드 블록으로 감싼 Markdown으로 저장할 수도 있습니다.
계정이 없으면 단 하나의 다이어그램이 브라우저에 저장되어, 같은 기기로 돌아오면 그대로 있습니다. 로그인하면 계정에 저장되어 다른 기기로도 가져갈 수 있습니다. 직접 사본을 원하면 소스를 내보내세요.
네. 코드 탭에 붙여넣으면, 순서도는 노드, 모양, 색상, 서브그래프가 그대로 유지된 채 비주얼 캔버스로 다시 해석됩니다. 다른 다이어그램 유형은 미리보기에서 렌더링되지만 코드로만 남습니다.
렌더링은 전적으로 브라우저에서 이루어지므로 페이지가 로드되면 오프라인에서도 편집기를 계속 사용할 수 있습니다.
빈 캔버스, 코드 탭, 모든 내보내기 옵션까지 — 무료로, 브라우저에서, 지금 바로.