# Mermaid

図のソースを編集し、エディターでプレビューします。

import ContentEditor from '@/components/editor/ContentEditor.astro';

## 図を追加する

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

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

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

<ContentEditor content="mermaid" />

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

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

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

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