Help us understand the problem. What is going on with this article?

Typoraでシーケンス図、フローチャート、ガントチャートを描くための書き方まとめ

More than 1 year has passed since last update.

はじめに

MarkdownでUMLを扱うとき、VSCodeでPlantUMLを使う方が多いかと思います。
参考記事 : Visual Studio Code で UML を描こう!

ですが、Typoraでもシーケンス図、フローチャート、ガントチャートを作ることができるので、この記事ではこちらの記事をベースに、使い方と具体例を紹介します。

参考記事 : Draw Diagrams With Markdown - Typora

準備

Typoraのことやインストールについては、下記記事を参照してください。

インストールできたら、Typoraを起動し、設定 -> 文法サポート -> ダイアグラムにチェックを入れます。

seqenceによるシーケンス図

Typoraでは、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の左側にテキストボックス
Note over A : Aの上にテキストボックス
Note over A, B : AとBを覆うテキストボックス
participant A : 独立したライフラインAの生成
  • メッセージの改行は\nで、できます。

> を外してください。

> ```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
> ```

01.png

flowchartによるフローチャート

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

使い方

コマンド 意味
VAR=>start: NAME プログラムの開始
VAR=>operation: NAME プログラムの処理
VAR=>condition: NAME 分岐
VAR1=>VAR2 VAR1からVAR2へ矢印
VAR(right) 右向きへ矢印
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
> ```

02.png

mermaid

mermaidと記述することで、ガントチャートと js-sequenceflowchart.js に比べると、ちょっと高機能なシーケンス図、フローチャートが描けます。

sequence

最初の行に、 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 実行状態
A ->> +B : 実行状態
Note left of A : Text Aの左にテキストボックス
Note over A, B : Text AとBを覆うテキストボックス
loop TEXT ... end ループ処理
alt COND ... end 分岐処理
opt COND ... end 条件判断
  • activate Aは、deactivate Aとセット
  • A ->> +B :は、B -->> -Aとセット
  • 複数の分岐にはelse COND

> を外してください。

> ```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

> ```

03.png

flowchart

最初の行に、 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 -.- C AとCを破線で結ぶ
A -.-> C AからCへ矢印(破線)
A ==> C AからCへ太い矢印(直線)
A -- TEXT --> C AからCへ矢印(テキスト付き)
`A --> TEXT
A["double quote:#quot;"] テキストボックス内に正規表現を含むとき
A["dec char:#9829;"] テキストボックス内に絵文字を含むとき
A(fa:fa-spinner) テキストボックス内にFont Awesomeのアイコンを含むとき
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
> ```

04.png

Gantt

最初の行に、 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
> ```

05.png

おわりに

個人的には、カスタマイズしやすいmermaidが気に入っています。
ミス等があれば、コメントでご報告してくださると幸いです。

参考文献

snova301
プログラミングは最近はじめました
https://snova301.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした