Mermaid フローチャートを編集できる図に変換

使い方

1. 01

   Mermaid のコードを貼り付け

   Markdown ファイル、README、AI チャットのコードをそのまま使えます。mermaid のコードフェンスで囲まれていても、先頭に設定ブロックがあっても問題ありません。

2. 02

   編集できる図を確認

   フローチャートのノードは処理、判断、書類などのフローチャート図形に、サブグラフは枠に、ER のエンティティはテーブルカードになります。

3. 03

   Archboard で開く

   新しい図として保存すれば、図形の移動やスタイル変更、メモの追加、リンクの共有、SVG・PNG へのエクスポートができます。登録は Google か GitHub のアカウントだけで済みます。

Mermaid コードから描かれるもの

コードの次の部分が、編集できる図の要素になります。

• flowchartgraph

  flowchart と graph の図（flowchart-elk を含む）を、すべてのノードとラベルとともに描きます。fa:fa-car のような Font Awesome の接頭辞はラベルから取り除きます。

• @{ shape }

  括弧や新しい形状構文で書かれたノードの形は、処理、判断、端子、データ、書類、準備、手操作入力、結合子といったフローチャート要素に対応します。フローチャートに対応する要素がない形は、円柱のような最も近い基本図形か、処理のボックスになります。

• subgraph

  サブグラフは、入れ子のものも含めてノードを囲む枠になります。空のサブグラフは描きません。

• -->-.->==>

  矢印をラベル付きで描きます。実線、点線、太線のほか、A --> B --> C のような連結や A --> B & C のような分岐にも対応します。

• erDiagram

  erDiagram のエンティティは、各属性を型と PK・FK・UK のキーとともに並べたテーブルカードになり、リレーションシップはカーディナリティ付きで描かれます。非識別リレーションシップは破線になります。

• TDLR

  フローチャートの方向（TD、TB、LR、RL、BT）によって、図の流れる向きが決まります。

対応している Mermaid の図の種類

現在変換できるのは、フローチャート（flowchart と graph）と ER 図（erDiagram）です。sequenceDiagram、classDiagram、stateDiagram、gantt、pie、mindmap、timeline、gitGraph や新しい種類はまだ変換できません。その場合は誤ったフローチャートを描かずに、見つかった図の種類を表示します。

Mermaid の取り込みに含まれないもの

• シーケンス図、クラス図、状態遷移図、ガントチャート、円グラフ、マインドマップなどの種類。今のところ変換できるのはフローチャートと ER 図だけです。
• classDef、style、linkStyle、class による色やフォント。図は Archboard のスタイルで始まり、キャンバス上で変更できます。
• ノードのアイコンや画像。icon と img の設定は破棄され、ラベルは残ります。
• コードとのライブ連携。キャンバスを編集しても Mermaid のコードは変わらず、後からコードを変えても図は更新されません。