Mermaid構文を書いて、ライブSVGダイアグラムを取得。フローチャート、シーケンス、クラス、ER、ガント、円、状態、ジャーニー — すべてクライアントサイド。
Mermaid コードを入力してダイアグラムを表示。
Mermaid は GitHub の README、Notion ドキュメント、GitLab の issue、多数の静的サイトジェネレーターで使われているテキストベースの図表言語です。「flowchart TD\n A --> B」のような数行を書くだけで、Mermaid が SVG ダイアグラムにレンダリングします。本エディタはそのワークフローをブラウザに持ち込みます — 左側に Mermaid コードを貼り付けまたは入力し、右側にライブ SVG を表示、SVG(ベクター、ドキュメントに最適)または PNG(2倍スケール、スライド対応)でダウンロードできます。フローチャート、シーケンス、クラス、状態、ER、ガント、円、ジャーニーの8種類に対応。Mermaid ランタイム(~500 KB)はこのページを開いたときだけ読み込まれ、ワーカーバンドルには含まれません。すべてクライアントサイドでレンダリングされるため、機密のアーキテクチャ図がブラウザから外に出ることはありません。
flowchart TD → 上から下へのフローチャート sequenceDiagram → リクエスト/レスポンスのシーケンス classDiagram → 継承を含む UML クラス stateDiagram-v2 → ステートマシン erDiagram → エンティティ関係 (ER) gantt → プロジェクトタイムライン pie → 円グラフ journey → ユーザージャーニーマップ