Mermaid 図表エディタ
Bee Tools の Mermaid 無料オンラインエディタ。フロー・シーケンス・ガント・クラス・状態・円・ER 図対応。サンプル同梱、ライブプレビュー、SVG/PNG エクスポート、すべてブラウザ内描画。
テキスト構文で本格的な図表を描き、即時プレビュー。 Mermaid 宣言的構文で図を記述すると、Bee Tools がブラウザ内で鮮明なベクター画像にレンダリング。PNG/SVG にエクスポートして文書・スライド・ブログに挿入できます。
Mermaid 早見表
Mermaid とは
Mermaid は 2014 年に Knut Sveidqvist が作成した、Markdown 風の宣言的図表言語です。ドラッグ＆ドロップ式と異なり、ソースで図をバージョン管理できます。
早見表
- flowchart TD/LR — フローチャート。
A-->Bで接続、A{?}で判断、A([Start])でスタジアム形。 - sequenceDiagram — シーケンス。
Alice->>Bob: Helloが同期メッセージ、Bob-->>Alice: Hiが応答。 - gantt — ガント。
dateFormat指定の後、Task :a1, 2024-01-01, 7dでタスクと期間。 - classDiagram — クラス図。
class Animalで定義、Animal <|-- Dogで継承。 - stateDiagram-v2 — ステートマシン。UI / 注文 / パイプライン向き。
- pie — 円グラフを
"Apple" : 40の形で記述。
実用 Tips
- ノードラベルは短く。長文はレイアウト崩れの原因。
- 複雑な図は subgraph で分割。
classDefで配色をカスタマイズし可読性を上げる。%% コメントを入れて保守しやすく。
左のテキストを編集して、右でリアルタイムに結果を確認してください。
よくある質問
Mermaid とは何ですか?
Mermaid は Knut Sveidqvist が作成した JavaScript ベース図表言語です。Markdown 風テキストでフロー・シーケンス・ガントなどを生成。GitHub、GitLab、Docusaurus、Obsidian にネイティブ対応。
どの図表タイプに対応していますか?
flowchart、sequenceDiagram、gantt、classDiagram、stateDiagram-v2、pie、erDiagram、gitGraph、requirementDiagram をそのまま描けます。
図は保存やアップロードされますか?
いいえ。すべての描画はブラウザ内で行われ、タブを閉じると内容は消えます。
SVG/PNG エクスポートは劣化しますか?
SVG はベクターなので無劣化。PNG は 2 倍解像度で書き出すため十分な品質です。
Markdown に埋め込むには?
`mermaid` コードブロックで囲みます。GitHub、GitLab、Hugo、Hexo、Obsidian などが自動レンダリングします。