📊Mermaid 図表エディタ
テキストコードでフローチャート・シーケンス・ガント・クラス図・パイチャートを描画。GitHub READMEやNotion、Obsidianが既にmermaidに対応しているので結果を直接埋め込み可能。SVG・PNGでダウンロード。
🔒 ブラウザ内処理✓ ウォーターマークなし✓ 登録不要
使い方
- 1サンプルの中から1つを選んで始めます。
- 2左側のコードを編集すると右側のプレビューがリアルタイム更新されます。
- 3SVGまたはPNGでダウンロードします。
よくある質問
Mermaidとは?+
図表をテキストで描くオープンソースツール。コードのように記述するのでバージョン管理・コピー・修正が容易で、開発者・技術文書によく使われます。
GitHub READMEに埋め込み?+
GitHubは2022年からMarkdown内の```mermaidコードブロックを自動レンダリングします。当ツールでコードを作ってREADMEにそのまま貼り付ければOK。
Notion・Obsidianでも?+
Obsidianはコードブロックをそのままレンダリング。Notionは一部プラグインが必要。結果PNGを添付するのが最も互換性が良いです。
どの図表?+
フローチャート(flowchart)、シーケンス図(sequenceDiagram)、ガントチャート(gantt)、クラス図(classDiagram)、状態図、ER図、パイチャート(pie)など10種類以上。
PowerPoint・Keynoteで使うには?+
PNGダウンロード後にスライドに画像として挿入。2倍解像度で抽出されるので印刷用にもきれいです。
複雑なデザインは可能?+
Mermaidは素早く明確な図表中心。自由なデザインが必要ならdraw.io、Figma、Excalidrawが適しています。