Mermaid チートシート

Mermaid 言語の中核を、1 条ずつ——ソースコードは、その規則が描く図の隣に並べています。34 種類の図表タイプ、実際に使われる構文です。

このサイトのすべての図はMernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

どの図にも使う 4 つのこと

方向、矢印、ノード形状、スタイル——ここではフローチャートの構文で示します。何を描くにしても、この 4 つが最初に必要になり、たいていの図表タイプで書き方も同じです。

方向

最初の行が流れを決めます。TD と TB は同じ、LR と RL は横に走ります。

flowchart LR
  A[Start] --> B[Middle] --> C[End]

左から右へ流れるフローチャート。Start、Middle、End の 3 つの箱が矢印でつながっています。

矢印の種類

2 つのノードをつなぐ方法は 4 つ。実線、点線、開いた線、太い線です。

flowchart LR
  A[Solid] --> B[Target]
  A -.-> C[Dotted]
  A --- D[Open]
  A ==> E[Thick]

左の 1 つのノードから右の 4 つのノードへ、実線の矢印、点線の矢印、開いた線、太い矢印でつながっています。

ノード形状

入力した括弧がそのまま形になります。ここにある 5 つは Mernyx がふつうの箱として描くものです。

flowchart LR
  A[Rectangle] --> B(Rounded)
  B --> C([Stadium])
  C --> D[[Subroutine]]
  D --> E[(Database)]

5 つのノードがつながったフローチャート。形はそれぞれ長方形、丸角の箱、スタジアム形、サブルーチン、データベースの円柱です。

ノードにスタイルをつける

style は 1 つのノードだけを変えます。classDef は使い回せるスタイルに名前をつけます。

flowchart LR
  A[Normal] --> B[Highlighted]
  style B fill:#ee421d,color:#ffffff,stroke:#b32c0c
  classDef quiet fill:#f0f0f3,stroke:#d4d4d8
  class A quiet

図表タイプの一覧

どの図表タイプにも、それぞれのページ、それぞれの構文、それぞれの規則があります。

Mernyx は合計で 34 種類の図表タイプを描画します。このチートシートはすべてを扱います。

よくある質問

これは Mermaid の公式ドキュメントですか

いいえ。Mermaid の公式ドキュメントは網羅的で、フローチャートのページだけで数百種類の形状に及びます。ここは核心の構文を圧縮したチートシートで、図を書きながら引くための部分です。公式ドキュメントが掘り下げる場所、このページは規則を直接出します。

図が mermaid.live と違って見えるのはなぜですか

Mermaid.js が描いたものだからです。ここにある図はすべて Mernyx 独自のエンジンで描画しています——アプリがキャンバスで使うのと同じネイティブのレンダラーです。配色も間隔もタイポグラフィも Mernyx のもので、見えているのはアプリが出力した絵そのものです。

このスニペットをほかの Mermaid ツールに貼り付けられますか

できます。各見出しの下にあるソースコードはふつうの Mermaid なので、どこでも動きます。隣にある図は Mernyx がそのソースコードを描画した結果です——イラストであって、特殊な形式ではありません。

ここではどの図表タイプを扱っていますか

このシートは Mernyx が描ける 34 種類の図表タイプを扱います——1 タイプにつき 1 ページで、上のリストからリンクしています。

Mernyx は Mermaid の機能をすべてサポートしていますか

まだではありませんし、このサイトもそれを隠しません。1.0 の後も対応範囲は広がりつづけ、機能マトリクスが 34 種類それぞれのできることを示しています——ある図表タイプでできない操作は、アプリがグレー表示にして理由を示すのではなく、そもそも用意されません。

Mernyx で開いてみる

このページのスニペットをどれか 1 つ Mernyx に貼り付けて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。

Mernyx Pro を購入 — $19 無料ダウンロード