Mermaid

図を追加する

言語を mermaid にしたコードブロックを使います。エディターは mmd も認識します。ソースを変更するとプレビューが更新され、保存した文書ではコードブロックのまま残ります。

ビジュアルモードで編集する

図のソースを編集してから、ソースで Mermaid コードブロックを確認します。

mermaid.md

Generic

ビジュアルソース

サンプルをリセット

エディターを読み込み中…

編集できるサンプルです。変更はこのページ内にのみ保持されます。

```mermaid
flowchart LR
  Draft[下書き] --> Review[レビュー]
  Review --> Git
```

プレビューのエラーを直す

図が表示されない場合は、コードエディターで構文を確認してください。プレビューの対応範囲はエディターの Mermaid レンダラーによります。サイトで動く構文でも、エディターでは表示できない場合があります。

Prosefly でプレビューできても、ウェブサイトで Mermaid が有効になるわけではありません。サイトのビルドにも図への対応が必要です。初めて使う図は、公開前にサイトのプレビューで確認してください。