Leo的恒河沙

Typora ツールを使用してフローチャートを描く_participant as 使用 typro_時了了のブログ - CSDN ブログ#

#Omnivore

Typora ツールを使用してフローチャートを描く#

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

Typora ツールを使用してフローチャートを描く#

• Typora エディタの紹介
• Mermaid 構文を使用してフローチャートを描く
• 1. フローチャートの方向
• 2. ノードの形状
• 3. ノード間の接続
• 4. サブグラフ（subgraph）
• 5. シーケンス図（sequenceDiagram）
• 6. 参加者（participant）
• 7. メッセージライン
• 8. 処理中（activate）
• 9. 注釈（Note）
• 10. ループ（loop）
• 11. 判断（alt/opt）
• flow 構文を使用して標準フローチャートを描く
• 1. 標準フローチャート
• 2. 標準フローチャート（横向き）

Typora エディタの紹介#

Typora エディタは、Markdown 言語を使用してテキストを書くことをより簡単にし、従来の Markdown エディタを使用する際の痛点を解決し、シンプルで美しいインターフェースを実現し、リアルタイムプレビューなどの機能を提供します。
Typora 公式サイト： https://typora.io/.
Windows 版ダウンロードリンク：https://typora.io/#windows.

Mermaid 構文を使用してフローチャートを描く#

Mermaid は、テキストとコードを使用して図表やビジュアライゼーションを作成できます。これは、JavaScript に基づく図表およびチャートツールで、Markdown に触発されたテキスト定義を使用して動的に図表を作成および変更します。
公式サイト: https://mermaidjs.github.io/.
GitHub プロジェクトリンク: https://github.com/knsv/mermaid.

1. フローチャートの方向#

2. ノードの形状#

* 説明は引用符を使用して特定の特殊文字の使用を抑制できます。eg[“box”]

3. ノード間の接続#

4. サブグラフ（subgraph）#

subgraph サブグラフ名 サブグラフ内の説明文... end

• 1
• 2
• 3

例を挙げると：

• コード

graph TB id1(丸角矩形)--普通の線-->id2[矩形] subgraph サブグラフ名 id2==太線==>id3{菱形} id3-.虚線.->id4>右向き旗帜] id3--矢印なし---id5((円形)) end

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• コード結果表示

サブグラフ名

単線に文字を追加

太線に文字を追加

虚線に文字を追加

矢印なし

菱形

矩形

右向き旗帜

円形

丸角矩形

5. シーケンス図（sequenceDiagram）#

sequenceDiagram [参加者1][メッセージライン][参加者2]:メッセージ本文 ...

• 1
• 2
• 3

例を挙げると：

• コード

sequenceDiagram 敢敢->>+憨憨: いますか？ 憨憨->>-敢敢: いますよ

• 1

• 2

• 3

• コード結果表示

敢敢 憨憨 いますか？ いますよ 敢敢 憨憨

* コード中の + - 対は時系列ブロックを示します。

6. 参加者（participant）#

上記の例の中で、敢敢、憨憨は参加者であり、上記の構文は最もシンプルで、参加者が誰であるかを明確に示すことができます。

sequenceDiagram participant 参加者 1 participant 参加者 2 ... participant 略称 as 参加者 3 #この構文は次の説明で略称を使用して参加者 3を置き換えることができます

• 1
• 2
• 3
• 4
• 5

例を挙げると：

• コード

sequenceDiagram participant 敢敢 as A participant 憨憨 as B A->>B: いますか？ B->>A: いますよ

• 1

• 2

• 3

• 4

• 5

• コード結果表示

敢敢 憨憨 何してるの？ 音楽を聴いている 敢敢 憨憨

7. メッセージライン#

8. 処理中（activate）#

メッセージラインの末尾に + を追加すると、メッセージ受信者は現在のメッセージの「処理中」状態に入ります；
メッセージラインの末尾に - を追加すると、メッセージ受信者は現在のメッセージの「処理中」状態を離れます。
または、以下の構文を使用して特定の参加者が「処理中」状態に入ることを直接示すことができます。

activate 参加者

• 1

9. 注釈（Note）#

Note 位置表現 参加者: 注釈テキスト

• 1

• 位置表現

10. ループ（loop）#

loop ループの条件 ループ本体の説明文 end

• 1
• 2
• 3

11. 判断（alt/opt）#

alt 条件 1 説明 分岐 1 説明文 else 条件 2 説明 # else 分岐はオプション 分岐 2 説明文 else ... ... end

• 1
• 2
• 3
• 4
• 5
• 6
• 7

opt 条件説明 分岐説明文 end

• 1
• 2
• 3

例を挙げると

• コード

sequenceDiagramDiagram participant gg as 敢敢 participant hh as 憨憨 loop 毎日の挨拶 gg->>hh: 仕事は終わりましたか？ hh-->>gg: 終わりました、あなたは？ activate gg Note left of gg: 考えてみて alt 終わっていない gg-xhh: 終わっていない、残業中 else 終わりました gg-xhh: 終わりました、一緒に王者をやりましょう！ end opt 楽しい休日 hh-->gg: お誕生日おめでとう~ hh-->gg: 労働者の日おめでとう~ hh-->gg: 子供の日おめでとう~ end end

• コード結果表示

敢敢 憨憨 仕事は終わりましたか？ 終わりました、あなたは？ 考えてみて 終わっていない、残業中 終わりました、一緒に王者をやりましょう！ alt [終わっていない] [終わりました] お誕生日おめでとう～労働者の日おめでとう～子供の日おめでとう～opt [楽しい休日] loop [毎日の挨拶] 敢敢 憨憨

flow 構文を使用して標準フローチャートを描く#

1. 標準フローチャート#

例を挙げると

• コード

flowchat st=>start: 開始ボックス op=>operation: 処理ボックス cond=>condition: 判断ボックス(はいまたはいいえ?) sub1=>subroutine: サブプロセス io=>inputoutput: 入力出力ボックス e=>end: 終了ボックス st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

*Typora エディタで flow と入力すると、CSDN では編集時にキーワード flow が自動的に mermaid 構文 flowchat に変換されるため、コードの最初の行に flowchat が表示されます。

• コード結果表示

Created with Raphaël 2.2.0 開始ボックス 処理ボックス 判断ボックス (はいまたはいいえ？) 入力出力ボックス 終了ボックス サブプロセス yes no

2. 標準フローチャート（横向き）#

例を挙げると

• コード

flowchatchat st=>start: 開始ボックス op=>operation: 処理ボックス cond=>condition: 判断ボックス(はいまたはいいえ?) sub1=>subroutine: サブプロセス io=>inputoutput: 入力出力ボックス e=>end: 終了ボックス st(right)->op(right)->cond cond(yes)->io(bottom)->e cond(no)->sub1(right)->op

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• コード結果表示

Created with Raphaël 2.2.0 開始ボックス 処理ボックス 判断ボックス (はいまたはいいえ？) 入力出力ボックス 終了ボックス サブプロセス yes no

記事の知識点は公式の知識文書と一致しており、関連知識をさらに学ぶことができます。