Mermaidでアーキテクチャ図を作成する

環境

• VSCode : 1.108.0
• VSCodeの拡張機能 :
  • Markdown Preview Mermaid Support : 1.29.0
  • Markdown Preview Enhanced : 0.8.20
  • Iconify IntelliSense : 1.0.0

はじめに

Mermaidを利用したアーキテクチャ図の書き方についてざっくりまとめました。
ベータ版なためか、癖を感じる箇所もありますが使いやすいので正式版が楽しみです。

プレビュー表示画像

VSCodeにて構成をmd形式で記述し、プレビューにて表示したものが以下となります。
図中にアイコン入りの状態で表示されるので、そのまま切り取って資料へ添付可能です。
ただ、アイコンの名称と矢印が被ってしまうのは個人的に気になってしまったり。

ドキュメント利用時の注意点

ドキュメントとして利用する際の注意点を記載します。

プレビュー表示したらアイコンが「？」になる

プレビュー表示は、コマンドパレットの「Markdown: プレビューを横に表示」を利用する。
別の方法でプレビュー表示を試みると、アイコンが正常に表示されず「？」となります。

背景色を白地にしたい

プレビューの背景色を変える際は、VSCodeの背景色自体を変える必要がある。
「command + k」→「command + t」を利用し、背景色を白地にする。
他にも設定方法はあるが、これが一番手早いです。

Markdown記法

先の項で示したプレビュー描写を、Markdown記法で表すと以下になる。
groupを利用してボックスを作り、その中にserviceを記入して
あとはserviceどうしを繋げて構成を表していきます。
ただ、表示させるサービス名は日本語表記が未対応なようで、エラーになるので注意。

---
title アーキテクチャ図
---

%%{init:{
    "theme": "forest"
}}%%

architecture-beta
    group v-srv(mdi:server)[Virtual Server]
        service cron(mdi:timer)[Cron] in v-srv
        group folders(mdi:folder)[Folders] in v-srv
            service working-folder(mdi:folder)[Working Folder] in folders
            service backup-folder(mdi:folder-sync) [Backup Folder]in folders
        service db(logos:postgresql)[PostgresDB] in v-srv
        service python(logos:python)[Python Process] in v-srv
    cron:B --> T:python
    db:R <--> L:python
    python:B --> T:working-folder
    working-folder:R <--> L:backup-folder

Iconifyを利用したアイコンロゴの表示

表示されるアイコンロゴはIconifyを指定して反映している。
利用の際には「Iconify IntelliSense」というVSCode拡張機能を入れるのがおすすめです。

導入後は、Markdown中に小アイコンと予測変換が出るようになります。
アイコンの選択がし易くなるので、必須レベルに感じます。

あとがき

手早く管理がしやすいMarkdown形式を用いて作成ができるのはメリットなので、
正式版がいつ出るのか気になっています。

Markdown形式のため、AIにMermaidで図を書かせるのも容易かと思うので、それも後押して普及するのも期待したり。

また、アーキテクチャ図を書くための機能ですが、システム構成図の作成も可能なため
運用・保守工程の中で、既存システムの構成図をMermaidで手早く作成できるのも便利です。

参考

• Architecture Diagrams Documentation (v11.1.0+) | Mermaid
  • https://mermaid.js.org/syntax/architecture.html
• Mermaidでアーキテクチャ図が書けるようになったらしい #AWS - Qiita
  • https://qiita.com/hiroto_0411/items/3f4c950fa27430355e5a
• 【ベータ版】【小ネタ】Mermaidで構成図が書けるようになりました - サーバーワークスエンジニアブログ
  • https://blog.serverworks.co.jp/learned-to-draw-architecture-diagrams-with-mermaid
• feat: add iconify logos by hiroto1220 · Pull Request #281 · mjbvz/vscode-markdown-mermaid
  • https://github.com/mjbvz/vscode-markdown-mermaid/pull/281
• Iconify Design: All popular icon sets, one framework.
  • https://iconify.design/