ホスト型ワークスペースを使わない、コードとしての図

Mermaid 定義をコードの横に置き、ここでレンダリングして確認し、持ち運び可能な画像が必要なときに出力をダウンロードします。このツールは、リモートテーマ、クラウドストレージ、生成されるトラッキングリンクを意図的に避けています。

ブラウザで Mermaid 図をレンダリングする方法

Mermaid の定義を貼り付けると、同梱の Mermaid 11.17.1 レンダラーがページ内で図を描画し、SVG マークアップのコピーまたは kivtools-diagram.svg としてのダウンロードができます。組み込みの例はフローチャート・シーケンス図・ER モデルの 3 つですが、テストでは状態図、クラス図、ガントチャートも描画できました。Mermaid の文法全体を解析するためです。

解析・レイアウト・スタイルはこのタブ内で実行されます。図のテキストは送信されず、ページの読み込み後はオフラインでも描画でき、書き出した SVG は外部ファイルを参照せずスタイルを自身に含みます。

左のエディターに Mermaid の定義を貼り付けるか、「サンプル」で「フローチャート」「シーケンス図」「ER 図」を選び「サンプルを読み込む」を押すと、そのまま解析できる文書から始められます。
「図をレンダリング」を押します。定義が解析されて右側に描画され、ステータス行に成功か失敗した行が表示されます。
表示された構文エラーを修正します。メッセージ内のキャレットが予期しないトークンを示します。修正後に再度レンダリングしてください。以前のプレビューは新しい図に置き換わるまで残ります。
「SVG をコピー」で SVG マークアップをクリップボードに取り込み、「SVG をダウンロード」で kivtools-diagram.svg としてプロジェクトのファイルの隣に保存できます。
「クリア」でエディターを空にし、プレビューを消して、次の図に備えて 2 つの書き出しボタンを無効にします。

このツールが図に対して行うこと

描画できる図の種類

1 行目で文法が決まります。flowchart LR、sequenceDiagram、erDiagram、stateDiagram-v2、classDiagram、gantt などの Mermaid 11 の種類はテストで描画できました。先頭のキーワードが未知の場合は解析がすぐに停止します。また、他のツールからコピーした定義が、このバージョンでは受け付けない構文を使っていることもあります。

エディターはプレーンテキストで、自動補完もライブプレビューもありません。変更のたびにレンダリングし、ステータス行だけを手がかりにしてください。解析できることが分かっている文書に戻る最短の方法は、サンプルを読み込み直すことです。

厳格なレンダリングと HTML ラベル

レンダラーは Mermaid の strict モードで動作します。テストでは、<img src=x onerror=...> を含むラベルはイベントハンドラーが除去された状態で返り、script タグは実行されず、javascript: リンクは破棄され、click ディレクティブは外部リンクを生成しませんでした。ラベルには太字や改行などの安全な HTML は使えます。

これは HTML の禁止ではなくサニタイズの保証です。ツールはラベルから実行可能な内容を取り除きますが、定義そのものは拒否しません。ただし、機密性の高いデータは図のテキストに含めないでください。ページはローカルでも、書き出した SVG は共有できるファイルです。

書き出しの動作

「SVG をコピー」は SVG マークアップをクリップボードに、「SVG をダウンロード」は同じマークアップを kivtools-diagram.svg として保存します。どちらも図をレンダリングするまで無効で、「クリア」で再び無効になります。書き出したファイルは単体で開け、Markdown や HTML ページ、プルリクエストに埋め込めます。

構文エラーが起きてもステージは空になりません。最後に成功したプレビューが表示されたまま、ステータス行に解析メッセージと行番号が出ます。急いで編集した図ほど、この行を確認してから SVG をコピーしてください。