# Mermaid チートシート

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

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

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

### 方向

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

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

![左から右へ流れるフローチャート。Start、Middle、End の 3 つの箱が矢印でつながっています。](/diagrams/flowchart/direction.svg)

### 矢印の種類

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

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

![左の 1 つのノードから右の 4 つのノードへ、実線の矢印、点線の矢印、開いた線、太い矢印でつながっています。](/diagrams/flowchart/edges.svg)

### ノード形状

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

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

![5 つのノードがつながったフローチャート。形はそれぞれ長方形、丸角の箱、スタジアム形、サブルーチン、データベースの円柱です。](/diagrams/flowchart/shapes.svg)

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

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

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

![矢印で結ばれた箱 2 つ。右の箱がコーラル色で塗られ、左の箱は淡い灰色です。](/diagrams/flowchart/styling.svg)

## 図表タイプの一覧

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

- [Flowchart](/ja/cheat-sheet/flowchart/index.md): 四角、矢印、分岐——Mermaid というとき、たいていの人が思い浮かべる図。
- [Sequence diagram](/ja/cheat-sheet/sequence/index.md): 時間順に並ぶ、参加者どうしのメッセージ。
- [Class diagram](/ja/cheat-sheet/class/index.md): 型と、そのメンバー、そして型どうしの関係。
- [State diagram](/ja/cheat-sheet/state/index.md): 状態と、その間の遷移、そしてそのあいだの分岐。
- [ER diagram](/ja/cheat-sheet/er/index.md): エンティティと、そのカラム、そしてエンティティ間の基数。
- [Mindmap](/ja/cheat-sheet/mindmap/index.md): 矢印を書かずに、木になるテキストのアウトライン。
- [Architecture diagram](/ja/cheat-sheet/architecture/index.md): サービスと、そのサービスが属するグループ、そしてサービス間のエッジ。
- [Requirement diagram](/ja/cheat-sheet/requirement/index.md): 要件と、その種類、そしてそれを満たすもの。
- [Block diagram](/ja/cheat-sheet/block/index.md): ブロックの壁を、左から右へ読む。
- [Swimlane diagram](/ja/cheat-sheet/swimlane/index.md): 責任ごとに 1 本ずつ割り振った処理。
- [Agent flow diagram](/ja/cheat-sheet/agentflow/index.md): エージェントのステップと、それぞれが何のステップか。
- [Use case diagram](/ja/cheat-sheet/usecase/index.md): アクター、ユースケース、そしてそれらを囲むシステム。
- [Pie chart](/ja/cheat-sheet/pie/index.md): ラベルつきの値の一覧を、切り片で描いたもの。
- [Gantt chart](/ja/cheat-sheet/gantt/index.md): タスク、セクション、日付を、時間軸に沿って並べたもの。
- [Quadrant chart](/ja/cheat-sheet/quadrant/index.md): 2 本の軸、4 つの象限、そしてその上にプロットされた点。
- [Radar chart](/ja/cheat-sheet/radar/index.md): 1 つの指標に 1 本の軸、比較する 1 つごとに 1 本の曲線。
- [Treemap](/ja/cheat-sheet/treemap/index.md): 入れ子の長方形で、面積がそのまま値になるもの。
- [Kanban diagram](/ja/cheat-sheet/kanban/index.md): カードが並ぶ列。作業の 1 段階が 1 列です。
- [Packet diagram](/ja/cheat-sheet/packet/index.md): ネットワークパケットのビットを、項目ごとに見たもの。
- [Info diagram](/ja/cheat-sheet/info/index.md): Mermaid のバージョン表示。Mernyx は認識しますが、まだ描画しません。
- [Timeline](/ja/cheat-sheet/timeline/index.md): 片側に時期、そのそばに出来事。
- [Sankey diagram](/ja/cheat-sheet/sankey/index.md): 1 行に 3 つのフィールドで書く流れ。
- [User journey](/ja/cheat-sheet/journey/index.md): すべてのステップにスコアがついた経路。
- [Venn diagram](/ja/cheat-sheet/venn/index.md): 重なっている集合と、その共有領域。
- [C4 diagram](/ja/cheat-sheet/c4/index.md): アーキテクチャのビューを、3 段階のズームで見たもの。
- [Cynefin diagram](/ja/cheat-sheet/cynefin/index.md): 5 つのドメイン、それぞれに決め方の違うもの。
- [Git graph](/ja/cheat-sheet/gitgraph/index.md): ブランチの履歴を、描いてみたもの。
- [XY chart](/ja/cheat-sheet/xychart/index.md): 2 本の軸の上の、折れ線グラフまたは棒グラフ。
- [Wardley map](/ja/cheat-sheet/wardley/index.md): コンポーネントが見えやすさと進化のうえでどこに置かれるか。
- [Railroad diagram](/ja/cheat-sheet/railroad/index.md): 文法の規則を、描いてみたもの。
- [ZenUML diagram](/ja/cheat-sheet/zenuml/index.md): メソッド呼び出しのために書かれたシーケンス図。
- [Event modeling diagram](/ja/cheat-sheet/eventmodeling/index.md): 情報が時間とともにどう変わったか。
- [Ishikawa diagram](/ja/cheat-sheet/ishikawa/index.md): ひとつの問題と、その下にある原因。
- [Tree view](/ja/cheat-sheet/treeview/index.md): ディレクトリの一覧を、描いてみたもの。

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 に貼り付けて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。