Mermaid図エディター
左側にMermaid記法を入力すると、右側にリアルタイムでプレビューされます。
Mermaid記法サンプル集
以下のサンプルをクリックすると、エディタに読み込まれます。
フローチャート（上から下）
フローチャート（左から右）
シーケンス図
クラス図
ER図
ガントチャート
円グラフ
状態遷移図
Gitグラフ
MermaidCanvasについて
MermaidCanvasは、Mermaid記法を使って様々な図を簡単に作成し、PNG形式で保存できるウェブアプリケーションです。
Mermaid記法の基本をマスターするだけで、フローチャート、シーケンス図、クラス図など様々な図を簡単に作成できます。
主な機能
簡単な記法
テキストベースのシンプルな記法で、複雑な図を素早く作成できます。
リアルタイムプレビュー
入力した記法をリアルタイムでプレビューできるので、すぐに結果を確認できます。
PNG形式での保存
作成した図をPNG形式で簡単に保存でき、ドキュメントや発表資料に使用できます。
豊富なサンプル
様々な図のサンプルを用意しているので、基本的な使い方をすぐに学べます。
ダークモード対応
目に優しいダークモードにも対応しているので、夜間作業も快適です。
PWA対応
アプリとしてインストールでき、オフラインでも使用できます。
Mermaid記法の基本
Mermaid記法は、テキストベースのダイアグラム作成ツールです。以下は基本的な記法の例です。
フローチャート
graph TD
A[スタート] --> B{条件判断}
B -->|はい| C[処理1]
B -->|いいえ| D[処理2]
C --> E[終了]
D --> E
A[スタート] --> B{条件判断}
B -->|はい| C[処理1]
B -->|いいえ| D[処理2]
C --> E[終了]
D --> E
シーケンス図
sequenceDiagram
participant A as ユーザー
participant B as システム
A->>B: リクエスト
B->>A: レスポンス
participant A as ユーザー
participant B as システム
A->>B: リクエスト
B->>A: レスポンス
使い方
- 「エディター」タブでMermaid記法を入力します。
- 入力に応じて、右側にリアルタイムでプレビューが表示されます。
- 「PNG保存」ボタンをクリックすると、現在表示されている図がPNG形式で保存されます。
- 「サンプル集」タブでは様々な図のサンプルを確認でき、クリックするとエディターに読み込まれます。
さらに詳しく知りたい方へ
Mermaid記法の詳細については、公式ドキュメントをご参照ください。