今回の仕上がり
編集部で考えた3段階を、左から右へ進む図にしました。提供サンプルをそのまま転載した図ではありません。SVGは実際のダウンロード操作で保存しました。ただし、今回の出力は記事に埋め込むと図が見切れました。元ファイルを保管し、表示枠を補ったコピーを下に示します。
表示枠を補ったSVG · 元の出力SVG · 編集用のコード
表示用コピーでは、図全体の座標をviewBoxで指定し、幅と高さを明示しました。今回使わない外部スタイルシートの参照も外しています。図の文字・矢印・配置は変更していません。広い画面では図全体を表示します。狭い画面では文字を小さく潰さないよう、図を横スクロールして読みます。元の出力をそのまま正常表示できた、という紹介ではありません。
Codeへ入力し、右側の図を確認する
公式ページで別サービスへの案内が開いた場合は「Stay on mermaid.live」を選びます。Code側の編集欄を押し、既存のコードを選択して次の3行へ置き換えます。AIの生成機能やアカウント作成は使っていません。
flowchart LR
A[準備] --> B[遊ぶ]
B --> C[結果を見る]LRは左から右への配置です。角かっこの中が図に表示する文字、A・B・Cはつなぐ相手を区別する名前、矢印は関係を表します。入力直後ではなく、右側の図が更新されてから文字と順序を確認してください。
ActionsのSVGで保存する
Actionsを開き、SVGを押します。今回はSVGファイルのダウンロードが完了し、保存したファイルをローカルの別画面で開けました。元のコードもsource.mmdとして残しています。PNG、PDF、他アプリへの取り込みは未検証です。
矢印が出ない場合は、名前の綴りとハイフン2つ・大なり記号を確認します。長いラベルや複雑な分岐、印刷用の組版は今回の確認範囲に含めません。小さな関係図を、文章とコードで管理したいときの候補です。
共有先と、無料で試した範囲
共有用URLには図の状態が含まれます。Actionsにはmermaid.inkやKrokiへのリンクもあり、外部サービスでの表示は図の内容を送る操作と区別します。通信が一切ない、秘密の図を安全に扱える、とは検証していません。
今回の入力・プレビュー・SVG保存は登録・支払いなしで行えました。画面で案内されるMermaid AIの試用や有料機能は別で、申し込んでいません。個人制作や最近の流行とは断定せず、制作チームと貢献者のツールとして紹介します。
ソフトウェアはMIT。画面の出典と、Knut Sveidqvistの著作権表記を含む全文を保持しています。自作の3行と図の内容はCC0です。SVGに含まれる第三者の書式までCC0へ変えるものではありません。描画を担うMermaid本体のMIT全文も保持します。他人の図の権利が自動的に変わるという意味ではありません。確認日は2026年10月13日。SVGの枠と余白については縦横比の比較実験へ。