bbmaxi.com

フローチャート図

st=>start: 開始
op1=>operation: 処理1
op2=>operation: 処理2
cd1=>condition: 条件分岐1
cd2=>condition: 条件分岐2
sb1=>subroutine: サブルーチン
io1=>inputoutput: 出力
e=>end: 終了

st->cd1
cd1(yes)->op1->sb1->cd2
cd1(no)->sb1->cd2
cd2(yes)->io1
cd2(no)->op2->io1
io1->e

ソース

flow
st=>start: 開始
op1=>operation: 処理1
op2=>operation: 処理2
cd1=>condition: 条件分岐1
cd2=>condition: 条件分岐2
sb1=>subroutine: サブルーチン
io1=>inputoutput: 出力
e=>end: 終了

st->cd1
cd1(yes)->op1->sb1->cd2
cd1(no)->sb1->cd2
cd2(yes)->io1
cd2(no)->op2->io1
io1->

テーブル

A	B	C
1	2	3

WordPressのmarkdownプラグインを使い図形描画できる。

PDF変換しても図形内の文字を検索できる点が嬉しい　

---

mermaidサンプル

grafh LR

---

graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D

---

sequenceDiagram

sequenceDiagram
A ->> B: Hello Bob, how are you?
B-->>C: How about you John?
B--x A: I am good thanks!
B-x C: I am good thanks!
Note right of C: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
B-->A: Checking with John...
A->>C: Yes... John, how are you?

---

gantt

gantt
dateFormat YYYY-MM-DD
axisFormat %m/%d
title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10

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

---

sequenceDiagram

sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop- 
Healthcheck John->>John: Fight against hypochondria 
end
Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great!
John->>Bob: How about you? 
Bob-->>John: Jolly good!

---

grafh TD

graph TD;
    A[a]-->B{b};
    A-->C(c);
    B-->D;
    C-->D;

---

pie

pie
title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

---

flowサンプル

st=>start: User login
op=>operation: Operation
cond=>condition: Successful Yes or No?
e=>end: Into admin

st->op->cond
cond(yes)->e
cond(no)->op

---

seqサンプル

A->B: Message
B->C: Message
C->A: Message

ガントチャート描画詳細