作図記述言語について

概要

近年、GitHubなどのバージョン管理システムを使うことを考慮し、 仕様書、マニュアルなどのドキュメントをWordのようなワープロ文書 ではなく、MarkDown, AsciiDoc のようなマークアップ言語で記述する 傾向にあります。

この流れは、フローチャートや、クラス図、シーケンス図などのUML図を 現れていてそれらの図表を記述するための言語が開発されています。

本レポートでは、作図用DSLとして有名な PlantUMLmermaid を 紹介したいと思います。

PlantUML

PlantUML は、 Arnaud Roque が開発した 作図用のDSLで、以下の用に 一通りのUML図を記述することができます。

また、ER図のようなネットワーク構成図といった、IT開発でよく利用される 図表の記述や、JSONや、YAMLの記述からデータ構造を表現する図への変換を おこなう機能などの多くの機能を持っています。

PlantUML はJavaで作成されたCLIコマンドを利用することが一般的な ため、MarkDownとかと連携する場合には、通常記述されたソースコードから、 pngなど図に変換して置く必要があります。 (MarkDown用の変換ツールには、PlantUML のソースコードをインラインで 記述してあると、自動で変換し、イメージとのリンクに変換してくれるツール もあります。)

@startuml
Alice -> Bob: Authentication Request
alt successful case
    Bob -> Alice: Authentication Accepted
else some kind of failure
    Bob -> Alice: Authentication Failure
    Alice -> Log : Log attack start
        loop 1000 times
            Alice -> Bob: DNS Attack
        end
    Alice -> Log : Log attack end
else Another type of failure
   Bob -> Alice: Please repeat
end
@enduml

mermaid

mermaid は、Markdownを参考に作成された、Javascriptベースの 作図用DSLです。 このため、MarkDownとの相性も良く mermaid の 変換用ツールを scriptタグで指定するだけで、簡単 MarkDown 文書に 埋め込むことができます。

mermaid で記述可能な図表は以下の通りです。

mermaid は、上記のようにソフト開発者が良く使う図に特化した 機能となっているようです。

sequenceDiagram
  Alice->>Bob: Authentication Request
  alt successful case
      Bob->>Alice: Authentication Accepted
  else some kind of failure
    Bob->>Alice: Authentication Failure
    Alice->>Log: Log attack start
    loop 1000 times
      Alice->>Bob: DNS Attack
    end
    Alice->>Log: Log attack end
  else Another type of failure
      Bob->>Alice: Please repeat
  end

関連リンク

PlantUML公式

mermaid公式