Markdown記法でシーケンス図が書ける【Mermaid】

431
にほんブログ村 IT技術ブログへ

Mermaidとは?

タイトルの通りですが、Markdown記法でシーケンス図が書けるスクリプト言語です。
シーケンス図の他にもフローチャート、ガントチャートまで書けてしまいます。

開発してるとフローチャートやシーケンス図は書く機会もあるので覚えておくと便利かもしれません。
維持保守なんかでも障害時にシステムシーケンス図なんか書くと事象が整理されて良いですね。

公式サイトはこちら

シーケンス図のサンプル



		


上記の3行で以下の図が出力できます。

見え方

超簡単!超便利!
重たいExcelだのVisioだのと格闘する必要無いんです!

利用方法

いくつかあります。

  • WebサービスのMermaid Live Editorを利用する
    • コード入力欄にMermaidのコードを入力するだけ。
  • Github、Gitlabで使う
    • Mermaidのソースファイルを .md ファイルにして保存するとブラウザで表示できるようです。(未確認)
  • ローカルでコマンドライン出力する
    • Node.jsインストール済み環境で mermaid/mermaid.cli をインストール

コマンドのインストール方法

Node.jsインストール環境で以下を実行。



		


コマンドの実行方法

.mmd の Mermaid ソースファイルを読み込んでPNGファイルとして出力します。



		


コマンドヘルプは以下。-i が入力ファイル、 -o が出力ファイル。
出力形式はPNG、SVG、PDFが選択できるようです。



		


シーケンス図を書いてみる

Apache/Tomcat/MySQLのWebシステムシーケンス図。



		


フローチャートを書いてみる



		


矢印の開始位置、終了位置とか指定できないのかな?
ちょっといびつな感じになった。。。
とは言え、簡単に上記が出力できました。

ガントチャートを書いてみる



		


公式サイトのサンプルのままです。。。

結び

やっぱりシーケンス図が簡単に出来て見栄えもそのまま使えそうで良い感じ。
機会があれば使ってみては如何でしょうか?
Mermaid Live Editor ならすぐ使えるのでお勧めです。

広告

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

wpmaster
  • wpmaster
  • フリーランスシステムエンジニアの鎌形です。
    鎌形システムエンジニアリングとして都内で活動中です。

%d人のブロガーが「いいね」をつけました。