7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

とあるプロジェクトで情報共有の1つとして,GithubでMermaidを利用する機会がありました.意外とMermaidを(日本語で)まとめている記事が少なかったので,この機会にまとめたいと思います.
長くなり,編集時にエラーが発生するようになったので,本記事ではフローチャートのみを取り扱います.(もしかしてMermaidを沢山載せているのが原因かも?)

最新の情報は公式ドキュメントを参照して下さい.

ちなみに,こういう図が扱えます.(例はテキトーです.)

ノードの作成

node
flowchart
    id1[text]
    id2["Unicode ★ text"] 
    id3["`Markdown 
        text`"]

ノード間のリンク

矢印

arrow
flowchart
    id1[node1]
    id2[node2]
    id1 --> id2

丸矢印

circle
flowchart
    id1[node1]
    id2[node2]
    id1 --o id2

バツ矢印

cross
flowchart
    id1[node1]
    id2[node2]
    id1 --x id2

双方向矢印

bidirectional
flowchart
    id1[node1]
    id2[node2]
    id1 <--> id2

line
flowchart
    id1[node1]
    id2[node2]
    id1 --- id2

点線

dot
flowchart
    id1[node1]
    id2[node2]
    id1 -.- id2

太線

thick
flowchart
    id1[node1]
    id2[node2]
    id1 === id2

不可視のリンク

invisible
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id1 ~~~ id2
    id1 --> id3

ノードの位置関係を揃えたいけど,線は引きたくないというときに利用する.

テキストを挿入

arrow
flowchart
    id1[node1]
    id2[node2]
    id1-->|text|id2

リンクの連鎖

series
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id1 --> id2 --> id3
parallel
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id1 --> id2 & id3

ノードの複数のリンクを簡潔に記述するのに便利.

comparison
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id4[node4]
    id1 --> id3 
    id1 --> id4
    id2 --> id3
    id2 --> id4

これを並列で書くと以下の通り.

comparison
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id4[node4]
    id1 & id2 --> id3 & id4 

いずれも以下のような出力になります.

グラフの方向

top2bottom
flowchart TB
    id1[text1]
    id2[text2]
    id1 --> id2
bottom2top
flowchart BT
    id1[text1]
    id2[text2]
    id1 --> id2
right2left
flowchart RL
    id1[text1]
    id2[text2]
    id1 --> id2
left2right
flowchart LR
    id1[text1]
    id2[text2]
    id1 --> id2
タグ 説明
TB Top to Bottom(上から下へ)
TD Top Down(上から下へ)
BT Bottom to Top(下から上へ)
RL Right to Left(右から左へ)
LR Left to Right(左から右へ)

ノードの形状

四角形

box
flowchart 
    box[四角形]

角丸四角形

round_box
flowchart 
    round_box(角丸四角形)

スタジアム形

stadium
flowchart 
    stadium([スタジアム形])

サブルーチン

subroutine
flowchart 
    subroutine[[サブルーチン]]

円筒形

cylindrical
flowchart 
    cylindrical[(円筒形)]

円形

circle
flowchart 
    circle((円形))

非対称形

asymmetric
flowchart 
    asymmetric>非対称形]

斜方形

rhombus
flowchart 
    rhombus{斜方形}

六角形

hexagon
flowchart 
    hexagon{{六角形}}

平行四辺形 & 台形

parallelogram_and_trapezoid
flowchart 
    parallelogram[/平行四辺形/]
    parallelogram_alt[\平行四辺形\]
    trapezoid[/台形\]
    trapezoid_alt[\台形/]

二重円

double_circle
flowchart 
    double_circle(((二重円)))
7
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?