🫘

Mermaidでコンポーネント図を描く

2024/08/12に公開

UML

Mermaid

tech

はじめに

2024年8月現在、Mermaidにはコンポーネント図を描く機能がありません。これに対して、筆者はMermaidのフローチャートを使うことによってコンポーネント図を描く試みをしています。この記事では、筆者が試している、Mermaidのフローチャートを使ったコンポーネント図の描き方を紹介します。

まずは実際にMermaidのフローチャートを使って描いたコンポーネント図(上)とPlantUMLを使って描いたコンポーネント図(下)の比較をご覧ください。

Mermaidではコンポーネントの右上にコンポーネントを示すマークが無い点や、PlantUMLと配置が異なる点がありますが、コンポーネント、インターフェイス、関係、グループといったコンポーネント図の要素を表現することができているかと思います。

次章で具体的な描き方を説明していきます。

1. Mermaidのフローチャートを使ったコンポーネント図の描き方

1.1. インターフェイスの描き方

インターフェイスはかなり無理をして描いています。
まず、フローチャートの円ノードの中に半角スペースを入力することで白抜きの丸のロリポップを表現します。円ノードの中にインターフェイス名を入力してしまうと、円ノードが大きくなってしまうため、半角スペースのみを入力します。
そして、インターフェイス名を表記するために、スタイルに透明fill:transparent,stroke:transparentを指定したサブグラフで囲んで、インターフェイス名を入力します。

flowchart LR
  style if-http fill:transparent,stroke:transparent
  subgraph if-http [HTTP]
    http(( ))
  end
  http---web-server[≪Apache≫\nWeb Server]

1.2. 関係の描き方

要素間の関係は、Mermaidのフローチャートの標準の機能を使って様々な線を引くことが可能です。ここではFirst ComponentからHTTPインターフェイスに向けて破線の矢印でuseの関係を描いています。

flowchart LR
  style if-http fill:transparent,stroke:transparent
  subgraph if-http [HTTP]
    http(( ))
  end
  first-component[First Component]-.use.->http

1.3. グループの描き方

要素のグループ化にはサブグラフを使っています。ここではスタイルで背景に透明fill:transparentと、線に紫stroke:#9370DBを指定することで見た目をそれっぽくしています。

flowchart
  style some-group fill:transparent,stroke:#9370DB
  style if-http fill:transparent,stroke:transparent
  subgraph some-group [Some Group]
    subgraph if-http [HTTP]
      http(( ))
    end
    http---web-server[≪Apache≫\nWeb Server]
  end

1.4. はじめにで紹介したコンポーネント図の描き方

ここまで紹介した全ての方法を使うことで、はじめにで紹介した以下のコンポーネント図を描くことができます。

flowchart LR
  style some-group fill:transparent,stroke:#9370DB
  style if-data-access fill:transparent,stroke:transparent
  style if-http fill:transparent,stroke:transparent
  subgraph if-data-access [Data Access]
    data-access(( ))
  end
  data-access---first-component[First Component]
  subgraph some-group [Some Group]
    subgraph if-http [HTTP]
      http(( ))
    end
    http---web-server[≪Apache≫\nWeb Server]
  end
  first-component-.use.->http

説明は以上です。

おわりに

記事を読んでいただきましてありがとうございました。今回はMermaidのフローチャートを使ったコンポーネント図の描き方を紹介しました。かなりの妥協案ではありますが、どなたかの参考になれば嬉しいです。このような妥協案ではなく、いつかはMermaidにプルリクエストを出してコンポーネント図機能を搭載できるレベルになれるよう、これからも勉強を続けていきたいと思います。

参考資料: Mermaid issues #1462 Component Diagram

Mermaidのissuesにはコンポーネント図を求める声が大量に上がっています。

この中には、およそ2年間に渡ってコンポーネント図の開発を進めた方のコメントもありますが、現在は開発を中止しているようです。この方が実装したソースコードも掲載されていますので、興味を持たれた方は、是非引き継いでコンポーネント図の搭載に挑戦してみてください。