3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

マークダウン記法でmermaidを使用してフローチャートを作成する

Last updated at Posted at 2020-08-23

背景

VSCodeの拡張機能の中に、mermaidが存在する。
この機能を使用することでフロチャートなどを簡単に書くこができる。
おそらく現職の業務で使用することはないが、
面白い機能だと思ったので簡単にまとめる。

"mermaid"とは

詳しくは以下参照。(英語サイトです)
https://mermaidjs.github.io/

mermaidはフローチャートやシーケンス図を直観的に書くことのできる
作図ツールとのこと

マークダウン記法でフローチャートを書く

VScodeにここからここまではmermaidだよと認識させるために、
以下のブロックの中に記載する必要がある。

qiita.rb
'```mermaid'    --記載する際は ' は抜く

'```'

mermaidでの書き方

最初にどのチャートを書くか宣言する
・graph TD (縦向きフロー)
・graph LR (横向きフロー)

実際に記述すると、こんな感じ

・graph TD (縦向きフロー)

・graph LR (横向きフロー)

次にオブジェクトを宣言する

a[XXXX]

a: オブジェクト名
XXXX: オブジェクトの表記名

フローのつなぎ方

オブジェクト同士を以下でつなぐ
-->

実際に記述すると、こんな感じ

とりあえず、基本的なとこまで記載した。
他にもいろいろ書きたいので、別途追記したい。
てか、Qiita上でのmermaidの記載方法がわからない・・・

3
0
1

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
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?