snovaのブログ

主にプログラミングやデジタルコンテンツについて書きます。最近はPython, Flutter, VRに興味があります。

Typoraでシーケンス図、フローチャート、ガントチャートを作成

markdown

イントロダクション

markdownで図を描こうと思ったら、UMLを使うと便利です。
Typoraでは現在、js-sequence, flowchart.js, mermaidに対応しているので、今回はその紹介をします。
ちなみに、PDF等へエクスポートした時も、図は出力されます。

参考文献 : Draw Diagrams With Markdown - Typora

目次

seqence

シーケンス図とは

クラスやオブジェクト間のやりとりを時間軸に沿って表現する図

シーケンス図（Sequence Diagram） - IT専科

markdownでは、sequenceと記述することで、 js-sequence を読み込むことができます。

js-sequence 公式

チートシート

コマンド 意味 備考
A -> B : Message AからBへ矢印(線) 同期メッセージ
A --> B : Message AからBへ矢印(破線) 応答メッセージ
A ->> B : Message AからBへ矢印(open arrow) 非同期メッセージ
A -->> B : Message AからBへ矢印(破線、open arrow)
Title : タイトル
Note left of A : Aの左側にテキストボックス left, right
Note over A : Aの上にテキストボックス
Note over A, B : AとBを覆うテキストボックス
participant A : 独立したライフラインAの生成

例

``sequence <- もうひとつバッククオートを追加
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Note left of A: Note to the\n left of A
Note over A: Note over A
Note over A,B: Note over both A and B

participant E
`` <- もうひとつバッククオートを追加

flowchart

フローチャート(flowchart)とは

プロセスの各ステップを箱で表し、流れをそれらの箱の間の矢印で表すことで、アルゴリズムやプロセスを表現する図

フローチャート - Wikipedia

Typoraでは、 flow と記述することで、 flowchart.js を読み込むことができます。

flowchart.js 公式

チートシート

コマンド 意味 備考
VAR=>start: NAME プログラムの開始
VAR=>operation: NAME プログラムの処理
VAR=>condition: NAME 分岐 分岐はVAR(yes), VAR(no)のみ？
VAR1=>VAR2 VAR1からVAR2へ矢印
VAR(right) 右向きへ矢印 デフォルトはlower
VAR=>COMMAND : NAME :>URL[blank] URLを含む記号の作成
  • VAR と => の間などにスペースがあると、うまく読み込めない
  • カラーは対応してない？

例

``flow <- もうひとつバッククオートを追加
st=>start: Start :>http://www.google.com[blank]
op1=>operation: My Operation
io=>inputoutput: catch something...
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?
e=>end

st(right)->op1(right)->io(right)->sub1(right)->cond
cond(yes)->e
cond(no)->op1
`` <- もうひとつバッククオートを追加

mermaid

js-sequence や flowchart.js に比べると、高機能な図が描けます。
対応しているのは、sequence, flowchart, Gantt。
Typoraでは、 mermaid と記述することで使うことが出来ます。

mermaid 公式

sequence

mermaidでシーケンス図が作れます。
最初の行に、 sequenceDiagram と記述する必要があります。

Sequence diagrams - mermaid

チートシート
コマンド 意味 備考
participant A as Alice ライフラインAliceの作成。コマンド操作はAで
A -> B : Message AとBを直線で結ぶ
A --> B : Message AとBを破線で結ぶ
A ->> B : Message AからBへ矢印(直線)
B -->> A : Message BからAへ矢印(破線)
A -x B : Message AからBへ矢印(xあり直線)
A --x B : Message AからBへ矢印(xあり破線)
activate A 実行状態 deactivate Aとセット
A ->> +B : 実行状態 B -->> -Aとセット
Note left of A : Text Aの左にテキストボックス left, right
Note over A, B : Text AとBを覆うテキストボックス
loop TEXT ... end ループ処理
alt COND ... end 分岐処理 複数の分岐にはelse COND
opt COND ... end 条件判断
例
``mermaid <- もうひとつバッククオートを追加
sequenceDiagram

Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end

`` <- もうひとつバッククオートを追加

flowchart

mermaidでフローチャートが作れます。
最初の行に、 graph TB と記述すると、上から下へのフローチャートが、 graph LR だと、左から右へのフローチャートになります。
(他には、 graph BT: 下から上、 graph RL : 右から左 )

Flowcharts - Basic Syntax - mermaid

チートシート
コマンド 意味 備考
A[B] 名前がBのノードA(四角) 形状を指定しなかったら、四角のノードになる
A(B) 名前がBのノードA(エッジが丸みを帯びている四角)
A((B)) 名前がBのノードA(円)
A>B] 名前がBのノードA(非対称図形)
A{B} 名前がBのノードA(菱形) 分岐用
A --> C AからCへ矢印(直線)
A --- C AとCを直線で結ぶ
A -- TEXT --- C AとCを直線で結ぶ(テキスト付き) バーティカルバーを使う方法もある
A -- TEXT --> C AからCへ矢印(テキスト付き直線) バーティカルバーを使う方法もある
A -.- C AとCを破線で結ぶ
A -. TEXT .- C AとCを破線で結ぶ(テキスト付き) バーティカルバーを使う方法もある
A -.-> C AからCへ矢印(破線)
A -. TEXT .-> C AからCへ矢印(テキスト付き破線) バーティカルバーを使う方法もある
A ==> C AからCへ太い矢印(直線)
A == TEXT ==> C AからCへ太い矢印(テキスト付き直線) バーティカルバーを使う方法もある
A["double quote:#quot;"] テキストボックス内に正規表現を含むとき
A["dec char:#9829;"] テキストボックス内に絵文字を含むとき
A(fa:fa-spinner) テキストボックス内にFont Awesomeのアイコンを含むとき Font Awesomeのアイコン検索ページに飛び、フリーのフォントからidを取得
subgraph NAME ... end サブグラフの定義
style A ... Aのスタイルを設定
classDef className ... 名前がclassNameのクラスの定義とスタイルの設定 class A, B classNameでclassNameに入れるノードを定義
例
``mermaid <- もうひとつバッククオートを追加
graph TB

A[Hard edge] -->B(Round edge)
B -.-> C{Decision}

C -->|One| D["dec char:#9829;"]

C -. Two .-> E(fa:fa-spinner)
E --> G

C ==>|PASS| F((Circle))
F ==> G>Goal]

C ---|Three| H[four]
subgraph sub1
H -.-> I[five]
style I fill:#fff,stroke:#000,stroke-width:1px
end
I --> C
`` <- もうひとつバッククオートを追加

Gantt

mermaidではガントチャートを描くことができます。
ガントチャートとは、

プロジェクト管理や生産管理などで工程管理に用いられる表の一種で、作業計画を視覚的に表現するために用いられる

ガントチャート - Wikipedia

最初の行に、 gantt と記述します。

Gant diagrams - mermaid

チートシート
コマンド 意味 備考
title タイトル
dateformat YYYY-MM-DD 日付の入力形式設定(ex. 2018-12-29) その他の入力形式は下表参照
section セクション
NAME : OPTION, ID, DATE, TERM (or DEADLINE) 日付DATEから期間TERM(or 日付DEADLINE)までのプロジェクトNAMEの生成 OPTIONとIDは任意
done すでに終わったプロジェクト OPTION
crit 重要なプロジェクト OPTION
active 現在進行中のプロジェクト OPTION
after IDのあとにプロジェクトを開始 DATE

時刻の入力形式について

入力 例 説明
YYYY 2018 年(4桁)
YY 18 年(2桁)
Q 1 ... 4 四半期
M または MM 1 ... 12 月(数字)
MMM または MMMM Jan ... Dec 月(英名)
D または DD 1 ... 31 日
Do 1st ... 31st 日
DDD または DDDD 1 ... 365 日(1年単位)
X 1410715640.579 Unix時間
x 1410715640579 Unix時間(ミリ秒)
H または HH 0 ... 23 時間(24時間表示)
h または hh 1 ... 12 時間(12時間表示)
a または A am pm AM, PM
m または mm 0 ... 59 分
s または ss 0 ... 59 秒
S 0 ... 9 1/10秒
SS 0 ... 99 1/100秒
SSS 0 ... 999 1/1000秒
Z または ZZ +12:00 UTCからのオフセット
例
``mermaid <- もうひとつバッククオートを追加
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid

section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d

section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison          :crit, done, after des1, 2d
Create tests for parser             :crit, active, 3d
Future task in critical line        :crit, 5d
Create tests for renderer           :2d
Add to mermaid                      :1d

section Documentation
Describe gantt syntax               :active, a1, after des1, 3d
Add gantt diagram to demo page      :after a1  , 20h
Add another diagram to demo page    :doc1, after a1  , 48h

section Last section
Describe gantt syntax               :after doc1, 3d
Add gantt diagram to demo page      : 20h
Add another diagram to demo page    : 48h
`` <- もうひとつバッククオートを追加

まとめ

js-sequence, flowchart.js, mermaidを使って、Typora上で簡単なシーケンス図やフローチャート、ガントチャートを作りました。
markdown記法の仕様上、読みにくいところがあるかもしれませんが、ご容赦ください。
ミス等があれば、コメントでご報告してくださると幸いです。

参考文献

Google Play and the Google Play logo are trademarks of Google LLC.