AnytimeTRAIL

Mermaid をブラウザで書いて、その場で図にする

Mermaid はテキストで図を書く記法です。コードブロックに書いた通りにフローチャートやシーケンス図が組み立てられるので、図形を並べ替える作業が要りません。このページのエディタは、インストールも登録もなしにそれをブラウザで行います。

書き方

フローチャート

```mermaid
flowchart TD
    A[Write the draft] --> B{Need a diagram?}
    B -- yes --> C[Add a mermaid block]
    B -- no --> D[Publish as is]
    C --> D
```

flowchart TD は上から下へ流れる図です。--> が矢印、{ } が分岐、[ ] が処理を表します。矢印に付けたラベル（-- yes -->）はそのまま分岐の条件として描かれます。

シーケンス図

```mermaid
sequenceDiagram
    participant B as Browser
    participant S as Server
    B->>S: save request
    S-->>B: saved revision
```

participant で登場人物を宣言し、->> で実線の呼び出し、-->> で破線の応答を書きます。宣言の順序がそのまま図の左右の並びになります。

このエディタでできること

本文の中に図を置く

図は独立したファイルではなく、Markdown の本文に埋め込まれたコードブロックです。文章と図が 1 つのファイルにまとまるため、片方だけが古くなることがありません。

ブラウザの中だけで組み立てる

Mermaid の描画はブラウザの中で完結します。図のコードが外部のサーバーへ送られることはありません。

標準の Markdown として持ち出す

書いたものは mermaid のコードブロックを含む普通の Markdown です。ダウンロードして GitHub や Google Drive へ置いても、記法は独自形式に変わりません。

よくある質問

何かインストールが必要ですか。

不要です。このページを開いた時点で書き始められます。登録も要りません。

GitHub でも図として表示されますか。

表示されます。GitHub は `mermaid` のコードブロックを図として描画するため、ここで書いたものをそのまま README や Issue へ貼れます。

どの種類の図を書けますか。

フローチャートとシーケンス図のほか、Mermaid が対応する図種を書けます。クラス図や配置図のように PlantUML のほうが書きやすい図は、PlantUML のコードブロックへ切り替えられます。

この記法をそのまま試せます。

エディタを開く

ほかの記法