Markdown でフローチャート各要素(ノード)の形の変え方 (Mermaid)

便利ツール

2022.02.08

Notion でフローチャートをはじめとした図が書けるようになりました！これは Mermaid に対応したことによるものです。

　これまでの記事では、「フローチャートの書きかたの基本」と、その応用として「全体の図の方向の決め方・設定の方向」についてまとめたり、「矢印・エッジの変更」や「テキストの設定」についてまとめたりしてきました！今回の記事では、その続きとしてフローチャートを書く上で知っておけるといい機能「各要素(ノード)の形の変え方」についてまとめていきます！

　基本的な書き方について知りたい方は、この記事からみてください！！

Markdown でフローチャートの作り方入門編 (Mermaid)

　先日、NotionにもMermaid(マーメイド) が対応されるようになりました！この対応によって、図がMarkdownで書くことができるようになりましたが、どうやって書いていけばよいのか？といったところについては説明できていなかったの...

矢印・エッジの変更

Mermaidの線・矢印・点線まとめ【コピペ例つき】

Mermaidフローチャートの線と矢印を一覧で解説。実線、点線、太線、双方向、丸・バツ、ラベル、長さ、直角線、色変更をコピペ例で確認できます。

テキストの設定

Mermaidのテキスト設定まとめ｜改行・括弧・特殊文字・エラー対処

Mermaidフローチャートのテキスト設定を解説。IDと表示名、改行、括弧、Markdown装飾、日本語・絵文字、特殊文字、コメント、構文エラー対処をコピペ例で確認できます。

各要素 (ノード)の形変更

デフォルトでは、このように長方形の形になりますが、フローチャートでは、この形を意味によって変えていますよね。

条件分岐や、反復などを使わずフローチャートを書くことはないと思うので、この記事ではこの形の変え方についてまとめていきます！

今回紹介する例では、下の記事で紹介したテキストの設定に基づいて、id と表示する文字を分けて記述していく方法で書いています！(詳しくはこの記事を見てください！)

Mermaidのテキスト設定まとめ｜改行・括弧・特殊文字・エラー対処

また、表にまとめるコードは、下のコードの2行目を変えることで実装することができます

flowchart LR
    id[はじめ]

形	意味	コード
長方形 (デフォルト)	処理記号	`id[はじめ]`
角が丸い長方形	？	`id(はじめ)`
スタジアム型	開始・終了記号	`id([はじめ])`
サブルーチン形状	定義済み処理	`id[[はじめ]]`
円筒形	データ	`id[(はじめ)]`
円形	結合子	`id((はじめ))`
非対称形状	？	`id>はじめ]`
ひし形	判断	`id{はじめ}`
六角形	準備	`id{{はじめ}}`
平行四辺形	データ	`id[/はじめ/]`
平行四辺形(逆)	データ	`id[\はじめ\]`
台形	手作業	`id[/はじめ\]`
台形(逆)	手作業	`id[\はじめ/]`