Mermaid2Img
編集可能なサンプル

Mermaid アーキテクチャ図テンプレート

編集しやすいアーキテクチャ図のMermaid例から始め、構文を調整し、ライブプレビューして文書やプレゼン用の画像を書き出せます。

アーキテクチャ図を編集テンプレートを見る

アーキテクチャ図を試す

architecture-beta
  group browser(cloud)[Browser]
  service editor(server)[Editor] in browser
  service renderer(server)[Mermaid Renderer] in browser
  service export(server)[Image 書き出し] in browser
  editor:R --> L:renderer
  renderer:R --> L:export
  align row editor renderer export

Mermaid アーキテクチャ図テンプレートとは？

Mermaid アーキテクチャ図テンプレートは編集可能なMermaidサンプルページです。構文を確認し、フルワークスペースで編集を続け、PNG、JPG、SVG、PDFとして書き出せます。

使いやすいMermaidの起点構文

書き出し前にライブプレビュー

PNG、JPG、SVG、PDF出力

ブラウザ内レンダリング

Mermaidのオンラインプレビュー以上

Mermaid2Imgはオンラインエディタ、テンプレート、スタイル設定、ローカル履歴、複数形式のエクスポートを1つのワークスペースにまとめています。

Mermaid構文とレイアウトをライブプレビュー
PNG、JPG、SVG、PDFをまとめて出力
文書作成に使いやすい22種類の図表テンプレート
プライベートな図にも使いやすいブラウザ内処理

Mermaidの書き出し形式を選ぶ

同じ図を複数形式で書き出せるため、用途に合うファイルを選んでからダウンロードできます。

PNG
README、チケット、ドキュメント、チャット

多くの場所で扱いやすい鮮明なビットマップが必要なときに使います。

JPG
小さいファイルと手早い共有

透明背景が不要で、軽いプレビュー画像が欲しいときに向いています。

SVG
Web、ベクター資料、デザイン共有

拡大しても崩れない線や後からの調整が必要なときに使います。

PDF
印刷、提案書、プレゼン資料

図を文書として配布したいときに適しています。

構文チェック

現在のMermaidアーキテクチャ図は `architecture-beta` を使います。
まずgroupを宣言し、その中にserviceを置きます。
`R --> L` などの方向ラベルでサービスを接続します。
Mermaid 11.16 では `align row|column id id...` でサービスの配置を制御できます。

使い方

1

アーキテクチャ図の例を開きます。

2

ラベル、ノード、関係を自分の内容に置き換えます。

3

図を書き出すか、ワークスペースで続けて編集します。

よくある質問

Mermaidのアーキテクチャ図とは何ですか？

アーキテクチャ図はテキスト構文で書き、文書や計画用の図としてレンダリングできるMermaidの図表タイプです。

アーキテクチャ図テンプレートをPNGに出力できますか？

はい。Mermaid2ImgでPNG、JPG、SVG、PDFとして直接書き出せます。

レンダリングはどこで行われますか？

図のレンダリングとエクスポートはブラウザ内で行われます。

オンラインで編集して書き出す

下の埋め込みエディタを試すか、詳細設定はフルワークスペースで開けます。

Loading editor...