素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日:

【ドキュメントをGit管理可能】mermaid.jsでフローチャートやシーケンス図をマークダウン管理しよう【UML】

YouTube

スポンサーリンク

336×280




MD形式でシーケンス図を描きたい

専用ツールは使いたくない

皆さんはシステム開発をする際にシーケンス図を書いていますでしょうか?

様々なシステムと連携する際に、それぞれの処理フローを明確にするためにはシーケンス図を書く事がとても大事ですよね。

しかし、シーケンス図を書くにはパワポで図形と線を引いたり、エンタープライズアーキテクト(EA)などのツールを使って書いたりと割と手軽に書く事が出来ず、かつ修正や保守のリスクが高いイメージがありました。

今はMDで簡単にかけてGit管理も可能

しかし、最近ではマークダウンベースの記述で簡単に図に起こす事が可能となっています。

メジャーなものでPlantUMLmermaid.jsがありますが、今回は後者のmermaid.jsを使ってみようと思います♪


Mermaid lets you create diagrams using text and code. This simplifies the maintenance of complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
mermaid – Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

様々な図をかける

mermaid.jsはシーケンス図だけではなく、様々な図を書く事が出来るので、気になる方は使ってみるといいでしょう♪

書ける図

  • Flowchart(フローチャート)
  • Sequence diagram(シーケンス図)
  • Class Diagram(クラス図)
  • State Diagram(状態遷移図)
  • Entity Relationship Diagram(実体関係性ダイアグラム)
  • User Journey(ユーザージャーニー)
  • Gantt(ガントチャート)
  • Pie Chart(円グラフ)

使い方

導入方法

導入方法はダウンロード、CDN、npmなどなど色々ありますが、今回は簡単に試したかったので、CDNで読み込んでみようと思います。

mermaid.jsはHTMLファイルで管理するので、まずはドキュメントを参考に以下のようなHTMLを用意しましょう。

フローチャート

ブラウザで表示するとこのような形になります。

おぉ!いい感じですね♪

それぞれのUMLの記述の詳細は公式サイトにあるのでそちらで確認してみてもらえればなと思います♪

本日のオススメ商品

終わりに

以上のように手軽にシーケンス図やフローチャート図を書く事が出来るようになりました。

ドキュメント形式でGit管理出来るのも魅力なので、是非導入してみてはいかがでしょうか♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist

関連記事

YouTube

お名前.comサイドバー