カテゴリー
StackEdit

Markdown -marmeidサンプル

Table of Content

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