Go to Qiita Advent Calendar 2024 Top
LoginSignup
54
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@hiroto_0411(Hiroto Yamazaki)in株式会社Schoo

Mermaidでアーキテクチャ図が書けるようになったらしい

Last updated at Posted at 2024-09-12

株式会社Schooの@hiroto_0411です！
新卒研修でMermaidを使って以来、簡単な図はMermaidで書くようになりました！推しツールの1つになってきています🫶
そんなMermaidでアーキテクチャ図(Architecture Diagrams)を書けるようになったと聞いたので、実際に試してみました！

Mermaidとは

シーケンス図、クラス図、状態遷移図などをテキストベースで作ることができるツールです。

Mermaidを書くときに使うと便利なツール

Mermaid Live Editor
(2024/09/12現在、Mermaid v11.1.0以上に対応していないためアーキテクチャ図は見られないです)

ブラウザでMermaid記法を試すことができます。

mermaid

Markdown Preview Mermaid Support(VSCode拡張機能)
マークダウンで記述しながらプレビューを見られます。
mermaid

GitHub
github-example

サンプル
2024/09/12現在、GitHubではデフォルトのアイコンは使えますがiconifyのアイコンは使えないみたいです。

draw.io
(2024/09/12現在、アーキテクチャ図は対応していないです。)

Mermaidのコードからdraw.ioで図を作成することができます。draw.ioを使うことで、どうしても人が修正したい箇所の微調整を行うことができます。

draw.ioの上のタブの配置→挿入→高度な設定→Mermaid
の流れで選択して、表示されるテキストエリアにMermaidのコードを入力します。
drawio

drawio drawio drawio

Mermaidの良いところ

  • デザインや配置を自分で考える必要がない
  • 図を書き換えるのが比較的楽
    • テキストを書き換えるだけで変更できるので、矢印1つ1つを動かしたりしなくて良い
    • 複雑な図になってくると微調整は必要
  • version管理できる
  • 生成AIに書いてもらうこともできる
  • Notionやdraw.io、GitHubなどさまざまなサービスでテキストから図を作成・挿入することができる

アーキテクチャ図とは

システムやアプリケーションの構成要素とその相互関係、動作の流れを視覚的に表現した図のことです。

参考

Mermaidでアーキテクチャ図を書いてみよう！

ドキュメントを参考にして、実際に触ってみました！

今回試した環境
VSCode
Markdown Preview Mermaid Support(VSCode拡張機能)

VSCodeでMermaidを書くときの記法
マークダウンファイルを作成して以下のような記述方法で書くことができます。

sample.md
```mermaid
architecture-beta
    group public_api(cloud)[Public API]
    group private_api(cloud)[Private API] in public_api
    service database(database)[Database] in private_api
```

アーキテクチャ図の記法

Groups

sample 
    group public_api(cloud)[Public API]

アイコンとタイトルを指定することができます。


group 
group private_api(cloud)[Private API] in public_api

group内にgroupを配置する事もできます。

Services

services 
service database(database)[Database] in private_api

EdgesとArrows

線や矢印でサービス同士を繋ぐことができます。
edges

sample.md
```mermaid
architecture-beta
    group publicsubnet[Public subnet]
    group privatesubnet[Private subnet] 
    
    service ec2(logos:aws-ec2)[EC2]in publicsubnet
    service rds(logos:aws-rds)[RDS master] in privatesubnet
    
    ec2:B -- T:rds
```

ec2:B -- T:rds

ec2のbottomとrdsのtopをつなぐイメージです。

ec2:L --> R:rds

こうすると横に並べることができます。
また、-->みたいにすると矢印になります。

ec2:L -- T:rds

左と上を結ぶみたいな組み合わせもできます。

Junctions

分岐を表現する事もできます。

sample
sample.md
```mermaid
architecture-beta
    service left_disk(disk)[Disk]
    service top_disk(disk)[Disk]
    service bottom_disk(disk)[Disk]
    junction junctionCenter

    left_disk:R -- L:junctionCenter
    top_disk:B -- T:junctionCenter
    bottom_disk:T -- B:junctionCenter
```

分岐点をjunctionで表現して、そこから各サービスのどこに向かって繋がりを作るか指定するイメージです。

ちょっと複雑なAWSのアーキテクチャ図を書いてみる

コード sample.md 
    architecture-beta
        group vpc[VPC]
    
        service elb(logos:aws-elb)[ELB] in vpc
    
        group availabilityzone[Availability Zone ap northeast 1a] in vpc
        group availabilityzone2[Availability Zone ap northeast 1c] in vpc
    
    
        group publicsubnet[Public subnet] in availabilityzone
        group publicsubnet2[Public subnet] in availabilityzone2
    
        service ec2a(logos:aws-ec2)[EC2]in publicsubnet
        service ec2b(logos:aws-ec2)[EC2] in publicsubnet2
    
        group privatesubnet[Private subnet] in availabilityzone
        group privatesubnet2[Private subnet] in availabilityzone2 
    
        service rds(logos:aws-rds)[RDS master] in privatesubnet
        service rds2(logos:aws-rds)[RDS slave] in privatesubnet2
    
    
        elb:B --> T:ec2a
        elb:B --> T:ec2b
        ec2a:B --> T:rds
        ec2b:B --> R:rds
aws-sample

ちょっとずれていますが、いい感じにできました。
draw.ioではMermaidから実際に図を作成し、それぞれの要素の位置を微調整することができます。
まだMermaidのアーキテクチャ図には対応していないので、対応されるようになったらより複雑な図を作成することも可能になるかなと思いました！

アイコンについて

デフォルトではcloud,database,disk,internet,serverのアイコンを使用することができます。また設定によってiconifyのアイコンを使うこともできます。
設定の詳細はMermaidのドキュメントを確認してください！

使えるアイコンは以下のサイトを参照

現在、Markdown Preview Mermaid Supportはデフォルトのロゴのみの対応だったので、今回はMarkdown Preview Mermaid Supportのコードを修正してVSCodeで使えるようにして使ってみました！
PRも作成しているので、マージされればVSCodeでiconifyのアイコンが使えるようになるはずです！
Markdown Preview Mermaid Support(VSCodeの拡張機能)で一部のアイコンが使えるようになりました！

感想

  • 現状だとdraw.io,Notion,VSCodeの拡張機能などがまだ未対応なので使い所が難しいですが、それらのサービスで使えるようになったらとても便利かなと思いました。
  • 複雑なアーキテクチャはMermaidで作成して、draw.ioで微調整するなどの使い方ができたら可能性が広がるなと思いました！

皆さんもぜひ使ってみてください！

Qiitaでも使えるようになったらしい！

コード 
    architecture-beta
        group vpc[VPC]
    
        service elb(logos:aws-elb)[ELB] in vpc
    
        group availabilityzone[Availability Zone ap northeast 1a] in vpc
        group availabilityzone2[Availability Zone ap northeast 1c] in vpc
    
    
        group publicsubnet[Public subnet] in availabilityzone
        group publicsubnet2[Public subnet] in availabilityzone2
    
        service ec2a(logos:aws-ec2)[EC2]in publicsubnet
        service ec2b(logos:aws-ec2)[EC2] in publicsubnet2
    
        group privatesubnet[Private subnet] in availabilityzone
        group privatesubnet2[Private subnet] in availabilityzone2 
    
        service rds(logos:aws-rds)[RDS master] in privatesubnet
        service rds2(logos:aws-rds)[RDS slave] in privatesubnet2
    
    
        elb:B --> T:ec2a
        elb:B --> T:ec2b
        ec2a:B --> T:rds
        ec2b:B --> R:rds

Qiitaも現状はデフォルトのアイコンのみに対応しているみたいですね！

参考

Schooでは一緒に働く仲間を募集しています！

54
41
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
54
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?