Creating Software with Modern Diagramming Techniques

Web技術ベースのドキュメンテーション編集/管理システムでは、サポートが容易なので、GitHub, GitLab, Notion, そしてQiitaなどネイティブサポートされているものが多く、Mermaidが現在の作図ツールの覇権を握りつつあります。

そんな中で出版された『Creating Software with Modern Diagramming Techniques』は、Mermaidを使ったシーケンス図、クラス図およびC4図、ER図の書き方です。

それ以上でもそれ以下でもありませんが、記述内容は非常にわかりやすく、Mermaid入門書としてはなかなか良いのではないか、と思います。

特に最近近年の設計界隈で人気のあるC4図の書き方も詳しく載っているのは他には無い魅力だと思います。

こんな感じでflowchartの機能をベースに書きます。

---
title: "システムコンテキスト図"
---
flowchart TD
  CST["Personal Banking Customer
  [Person]
  銀行の顧客"]

  IBS["インターネットバンキングシステム
  [Software System]
  顧客が自分の銀行口座の情報を
  参照したり、決済をしたりする"]

  ES["Eメールシステム
  [Software System]
  内部のMicrosoft Exchange
  Eメールシステム"]

  MBS["メインフレーム
  銀行システム
  [Software System]
  顧客、口座、取引など顧客に関する
  銀行のコア情報の全てを格納する
  "]

  CST -.　利用する .-> IBS
  ES -. メールを送信する .-> CST
  IBS -. "[SMTP]を使い
  メール送信する" .-> ES
  IBS -. 使う .-> MBS
  classDef focusSystem fill:#1168bd,stroke:#0b4884,color:#ffffff
  classDef supportingSystem fill:#666,stroke:#0b4884,color:#ffffff
  classDef person fill:#08427b,stroke:#052e56,color:#ffffff
 	
  class CST person
  class IBS focusSystem
  class ES,MBS supportingSystem

しかし、この類の書籍の難しいところなのですが、流通している間に、MermaidでC4図のサポートが開発されている(2023年末で、まだExperimentalの段階)ので、もはやこのテクニックも必要なくなるかもしれません。

C4Context
    Person(CST, "銀行の顧客", "")

    System(IBS, "インターネットバンキングシステム", "顧客が自分の銀行口座の情報を<br/>参照したり、決済をしたりする")

    System_Ext(ES, "Eメールシステム", "内部のMicrosoft Exchange<br/>Eメールシステム")
    System_Ext(MBS, "メインフレーム<br/>銀行システム", "顧客、口座、取引など顧客に関する<br/>銀行のコア情報の全てを格納する")
    

  Rel(CST, IBS, "利用する")
  Rel(ES, CST, "メールを送信する")
  Rel(IBS, ES, "[SMTP]を使い<br/>メール送信する")
  Rel(IBS, MBS, "使う")

  UpdateLayoutConfig($c4ShapeInRow="2", $c4BoundaryInRow="2")

一応本書では、モデリングを順を追って、どこで各ダイアグラムを書くかの解説もされているので、その面で陳腐化することはないのですが…、Mermaid公式のドキュメントは常時チェックしておく方が望ましいでしょう。