テキストが、そのまま図になる。
Mermaid記法でテキストを書くと、その場でフローチャートが描かれます。テンプレートから始めて、SVG/PNGで保存。入力は外に出ません。
Mermaid記法を書く
※ 図の生成・書き出しはすべてブラウザ内で行われ、入力テキストはサーバーに送信されません。複雑すぎる記法や対応外の図は崩れる場合があります。
3ステップで、図ができる。
テンプレートを選ぶ
基本フロー・分岐・横向きから選ぶと、サンプルが挿入されます。
テキストを書き換える
ノード名や矢印を編集すると、右の図がその場で更新されます。
SVG/PNGで保存
完成したらSVGまたはPNGでダウンロードして、資料に貼れます。
どう計算しているか
使っている式はすべて公開しています。条件を理解したうえで、目安としてご利用ください。
ユーザー入力由来のスクリプト混入を防ぐ安全設定で描画します。
例：flowchart TD / A[開始] --> B[終了]
PNGはSVGをcanvasで再描画して書き出します。
「図を描く」を、書くだけに。
書いた瞬間に図になる
テキストを打つたび、右にフローチャートがライブで描画されます。
テンプレですぐ書ける
基本フロー・分岐・横向きのサンプルをワンタップで挿入。
入力は外に出ない
図の生成も書き出しもブラウザ内。テキストは送信されません。
“伝える前に” 描く、図解の相棒。
“あの気持ちいいやつ” を、別のジャンルでも。
よくある質問
文章のようなテキストで図を表現する記法です。例えば「A[開始] --> B[処理]」のように書くと、矢印でつながった図が描かれます。テンプレートから始めれば、書き方を知らなくても使えます。
画面は壊れません。エラー内容を表示しつつ、直前に正しく描けた図はそのまま残ります。落ち着いて記法を直せます。
SVGは拡大しても劣化しないベクター形式で、編集・高品質印刷向き。PNGは画像形式で、どこにでも貼りやすいのが利点です。用途で選べます。
いいえ。図の生成も書き出しもすべてブラウザ内で行われ、テキストがサーバーに送信されることはありません。
注意事項・免責
図の描画はMermaidの記法に依存します。複雑すぎる図や対応外の記法は崩れる場合があります。
図の生成・書き出しはすべてブラウザ内で行われ、入力テキストはサーバーに送信されません。