Mermaid

外観

ChatGPT Pro、Mermaid.live、LucidChart を Mermaid Pro に置き換える

Mermaid ユーザーガイド ​

Mermaid は3つの部分で構成されています ​

  1. デプロイメント
  2. 構文
  3. 設定

このセクションでは、Mermaid をデプロイするさまざまな方法について説明します。

初心者の方へ

Mermaid の使用方法 ​

  1. Mermaid ライブエディタの使用
  2. Mermaid Chart エディタの使用
  3. Mermaid プラグインと連携の使用
  4. Mermaid JavaScript API の呼び出し
  5. Mermaid の依存関係としての追加

詳細については、使用方法ページをご覧ください。

1. Mermaid ライブエディタの使用 ​

Mermaid ライブエディタウェブサイトでご利用いただけます。

機能 ​


• ダイアグラムコード ​

コードパネルで Mermaid コードを作成または編集し、ダイアグラムパネルでレンダリングされた結果をすぐにプレビューします。

Mermaid コードとそのレンダリング結果の例を以下に示します。


• 設定 ​

設定パネルで設定オプションを使用できます。オプションは、プレビューパネルのダイアグラムに適用されます。

詳細については、設定リファレンスページをご覧ください。

Code,Config and Preview


• 編集履歴 ​

コードは自動保存され、履歴セクションのタイムラインタブに表示されます。編集は1分ごとに保存され、最後に30回の編集のみが表示されます。

または、履歴セクションの保存アイコンをクリックして、コードを手動で保存することもできます。

情報

履歴はブラウザのストレージのみに保存されます。


• ダイアグラムの保存 ​

アクションセクションからダイアグラムを保存するには、複数の方法があります。

  • PNGとしてエクスポート
  • SVGとしてエクスポート
  • Markdownとしてエクスポート

Flowchart


• ダイアグラムの編集 ​

ダイアグラムを編集するには、既存の Mermaid ダイアグラムコードをライブエディタのコードセクションにコピーアンドペーストします。

または

  • 新しいダイアグラムをゼロから作成します。
  • サンプルダイアグラムセクションからサンプルダイアグラムを使用します。

• Gistからの読み込み ​

作成するGistには、code.mmdファイルと、オプションでconfig.jsonファイルが含まれている必要があります。この例を参照してください。

情報

Gistの詳細については、GitHubのGistの作成に関するドキュメントページをご覧ください。

Gistを作成したら、GistのURLをアクションセクションの該当するフィールドにコピーアンドペーストし、Gistの読み込みボタンをクリックします。

エディタにGistを読み込む例を以下に示します。

https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a

上記の例のダイアグラムビューを以下に示します。

https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a

2. Mermaid Chart エディタの使用 ​

Mermaid Chartウェブサイトでご利用いただけます。

Mermaid Chartは、ブラウザでダイアグラムを作成および編集できるWebベースのダイアグラムエディタです。Mermaidの開発チームによって構築されました。

機能には以下が含まれます。

  • AIダイアグラム作成
  • 共同作業と複数ユーザーによる編集
  • ストレージ
  • その他多数

詳細については、ドキュメントのエコシステムセクションにあるMermaid Chartページをご覧ください。

または、Mermaid Chartウェブサイトにアクセスして、無料アカウントに登録してください。

3. Mermaid プラグインの使用 ​

Mermaid プラグイン ​

プラグインを使用して、一般的なアプリケーション内で Mermaid ダイアグラムを生成できます。

Mermaid プラグインと連携のリストについては、連携ページをご覧ください。

Mermaid Chart プラグイン ​

Mermaid Chartプラグインは、以下で使用できます。

詳細については、Mermaid Chartプラグインページをご覧ください。

ネイティブ Mermaid サポート ​

Markdownをサポートするアプリ（例：GitHubとGitLab）では、`mermaid`コードブロックを作成することで、Mermaidダイアグラムを追加できます。

マークダウン
The following code-block will be rendered as a Mermaid diagram:

```mermaid
flowchart LR
  A --> B
```

4. Mermaid JavaScript API の呼び出し ​

この方法は、`Apache`、`IIS`、`Nginx`、`Node Express`などの一般的なWebサーバーで使用できます。

`Notepad++`などのテキスト編集ツールを使用して`html`ファイルを作成する必要があります。その後、Webブラウザ（つまり、`Firefox`、`Chrome`、`Safari`）によってデプロイされます。

情報

Internet Explorerはサポートされていません。

APIは、ページにダイアグラムをレンダリングするために、ソース`mermaid.js`からレンダリング命令を取得することによって機能します。

Mermaid API の要件 ​

`html`ファイルを作成するときは、`htmlコード`内で`Webブラウザ`に2つの命令を与えます。

a. 作成するダイアグラムの Mermaid コード。

b. `mermaid.esm.mjs`または`mermaid.esm.min.mjs`によるMermaidライブラリのインポートと、ダイアグラムの外観を決定し、レンダリングプロセスを開始する`mermaid.initialize()`呼び出し。

例 ​

  • これは、<pre class="mermaid"> 内に埋め込まれた Mermaid ダイアグラム定義の例です。
html
<body>
  Here is a mermaid diagram:
  <pre class="mermaid">
        graph TD
        A[Client] --> B[Load Balancer]
        B --> C[Server01]
        B --> D[Server02]
  </pre>
</body>

情報

すべての Mermaid チャート/グラフ/ダイアグラム定義は、個別の<pre>タグを持つ必要があります。

  • これは、Mermaid のインポートと `mermaid.initialize()` コールの例です。

情報

`mermaid.initialize()` コールは、<pre class="mermaid"> タグ内に含まれるすべての定義を受け取り、それらをダイアグラムにレンダリングします。

html
<body>
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
</body>

情報

Mermaid でのレンダリングは、`mermaid.initialize()` コールによって初期化されます。しかし、逆を行うことで、`mermaid.initialize()` を使用して、いつウェブページ内の `<pre>` タグの検索を開始するかを制御できます。これは、`mermaid.esm.min.mjs` ファイルの実行時に、すべての `<pre>` タグがロードされていない可能性があると考える場合に役立ちます。

`startOnLoad` は、`mermaid.initialize()` で定義できるパラメーターの1つです。

パラメーター説明型値
startOnLoad読み込み時のレンダリングの切り替えブール値true, false

この例では、`mermaidAPI` が `CDN` を通じて呼び出されています。

html
<html>
  <body>
    Here is one mermaid diagram:
    <pre class="mermaid">
            graph TD
            A[Client] --> B[Load Balancer]
            B --> C[Server1]
            B --> D[Server2]
    </pre>

    And here is another:
    <pre class="mermaid">
            graph TD
            A[Client] -->|tcp_123| B
            B(Load Balancer)
            B -->|tcp_456| C[Server1]
            B -->|tcp_456| D[Server2]
    </pre>

    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
  </body>
</html>

この例では、`mermaid.js` が `src` で個別の JavaScript ファイルとして参照されています。

html
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <pre class="mermaid">
            graph LR
            A --- B
            B-->C[fa:fa-ban forbidden]
            B-->D(fa:fa-spinner);
    </pre>
    <pre class="mermaid">
            graph TD
            A[Client] --> B[Load Balancer]
            B --> C[Server1]
            B --> D[Server2]
    </pre>
    <script type="module">
      import mermaid from 'The/Path/In/Your/Package/mermaid.esm.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
  </body>
</html>

5. Mermaid を依存関係として追加する ​

以下は、Mermaid を依存関係として追加する手順です。

  1. `node v16` をインストールします。

情報

`Node.js` と `npm` のダウンロードとインストールの詳細については、npm ドキュメントウェブサイト を参照してください。

  1. このコマンドを使用して `npm` で `yarn` をインストールします。

    npm install -g yarn

  2. yarn のインストール後、このコマンドを入力します。

    yarn add mermaid

  3. Mermaid を開発依存関係として追加するには、このコマンドを入力します。

    yarn add --dev mermaid

締めくくり ​

情報

Mermaid の作成者 Knut Sveidqvist からのコメント

  • 初期バージョンの Mermaid では、<script> タグはウェブページの <head> 部分で呼び出されていました。現在では、上記のように <body> に配置できます。ドキュメントの古い部分は、依然として機能する以前の方法を反映していることがよくあります。