入力内容
変換結果
入力待ち
行数: 6文字数: 108
入力待ちズーム: 100%
Mermaid図表エディタとは？
MermaidはJavaScriptベースの図表描画ツールで、Markdownに似たテキスト構文を使用してさまざまな図表を生成します。手動で図形をドラッグする必要はなく、シンプルなテキストの記述だけで、フローチャート、シーケンス図、クラス図などを自動的に生成できます。
このツールはオンラインのMermaid編集環境を提供し、リアルタイムプレビュー、ドラッグ＆ズーム、エクスポート機能を備え、開発者が素早く図表を作成・共有できるように支援します。
使い方
基本的な使い方
- 左側のエディタにMermaid構文を入力します
- 右側に図表がリアルタイムでレンダリングされます
- マウスでドラッグして図表を移動、ホイールでズームします
- エクスポートボタンをクリックしてPNGまたはSVG形式で保存します
対応する図表タイプ
フローチャートgraph/flowchart、プロセスと判断パスを表示
シーケンス図sequenceDiagram、オブジェクト間のインタラクションの時系列を表示
クラス図classDiagram、クラスの属性と関係を表示
状態図stateDiagram、状態遷移を表示
ER図erDiagram、エンティティの関係を表示
ガントチャートgantt、プロジェクトのタイムラインを表示
円グラフpie、データの割合を表示
マインドマップmindmap、思考の構造を表示
ユーザージャーニー図journey、ユーザーエクスペリエンスのフローを表示
サンプル
フローチャート
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> Eシーケンス図
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: Send Request
Server->>Database: Query Data
Database-->>Server: Return Results
Server-->>Client: Send Responseクラス図
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+fetch()
}
class Cat {
+purr()
}
Animal <|-- Dog
Animal <|-- Catよくある質問
どの図表タイプに対応していますか？
フローチャート（graph/flowchart）、シーケンス図（sequenceDiagram）、クラス図（classDiagram）、状態図（stateDiagram）、ER図（erDiagram）、ガントチャート（gantt）、円グラフ（pie）、マインドマップ（mindmap）、ユーザージャーニー図（journey）の9種類の図表タイプに対応しています。
図表をエクスポートするには？
右側のパネルにある「PNG出力」または「SVG出力」ボタンをクリックすると、図表をダウンロードできます。PNG形式は文書への挿入に、SVG形式はベクター編集や印刷に適しています。
図表のズームや移動はできますか？
はい。マウスホイールで図表をズームし、マウスの左ボタンを押しながらドラッグして図表の位置を移動できます。プレビューエリアをダブルクリックすると、ビューを初期状態にリセットできます。
データはサーバーにアップロードされますか？
いいえ。Mermaid構文の解析と図表のレンダリングはすべてブラウザ上でローカルに実行され、データがデバイスから送信されることはありません。完全なプライバシー保護を実現しています。