Mermaid をテンプレートにして作成

開始行:
*Mermaid記法 ~ Mermaid記法とは、テキストから図を自動生成するためのコーデ... ~ ~ **Mermaid記法とは何か Mermaid（マーメイド）は、__[[Markdown]]__のようなテキスト... 通常、フローチャートやシーケンス図を作成するには専用のデ... ~ ***注目されている理由 -メンテナンスが楽 画像ではないので、コードを書き変えるだけで図の更新ができ... -Gitとの相性が良い テキストデータなので GitHub や Notion などで差分を管理し... -学習コストが低い 「A --> B」と書けば矢印が引ける・・など直感的で覚えやすい。 ~ ~ **コードサンプル Mermaidの中で最もよく使われるフローチャートを例に、実際の... ~ ***基本的な構成要素 graph TD：図の方向（上から下）を指定 graph LR：図の方向（左から右）を指定 [ ]：四角いノード（工程） { }：ひし形のノード（条件分岐） (( ))：丸いノード（開始/終了など） -->：矢印（流れ） ~ ***サンプルコード 判断分岐を含むフローチャートの事例 #image(FlowChart.png,right,30%); graph TD A(朝起きる) --> B[顔を洗う] B --> C{眠いですか？} C -- 眠い --> D[コーヒーを入れて飲む] C -- 眠くない --> E[執筆をはじめる] D --> E E --> F(完了) #clear ~ **作図ツールと手順 Mermaidは一般に普及しているため、専用ソフトをインストール... -生成AI（ChatGPT / Gemini など） 「以下の内容をMermaid記法で出力して」と頼むとコードが生成... -__[[Mermaid Live Editor>https://mermaid.live]]__ 公式サイトのブラウザエディタ。図の生成を即試すことができ... 図は、PNG形式やSVG形式で保存可能です。 -VS Code拡張機能 「Markdown Preview Mermaid Support」を入れると、プレビュ... -Notion /mermaid と入力してブロックを作成し、コードを貼り付けるだ... -GitHub .md ファイル内で「```mermaid」と「 ```」で囲むだけで、リ... ~ ~ **生成AI時代の Mermaid記法 今、Mermaidが改めて注目されている最大の理由は「AIとの相性... -AIが「描画」できる共通言語： AIは画像を直接ゼロから正確に描く（文字化けせずにフローを... -プロンプトによる一括修正： 「このフローに『承認ステップ』を追加して」とAIに頼めば、A... -トークン効率が良い： 画像データを読み込ませるよりも、軽量なテキストであるMerma... ~ ~ **APPENDIX Mermaidを使いこなす上で知っておくと便利なキーワード -__[[Markdown]]__ Mermaidが埋め込まれるベースとなる文書形式。エンジニアの標... -Text-to-Diagram 「文字から図を作る」という考え方そのもの。Mermaidはその代... -PlantUML： Mermaidと同様の存在。より複雑で高度な図が書けます（環境構... -__[[SVG]]__（Scalable Vector Graphics）： Mermaidが生成するグラフィックデータの形式（ベクトルデータ） ~ ~

終了行:
*Mermaid記法 ~ Mermaid記法とは、テキストから図を自動生成するためのコーデ... ~ ~ **Mermaid記法とは何か Mermaid（マーメイド）は、__[[Markdown]]__のようなテキスト... 通常、フローチャートやシーケンス図を作成するには専用のデ... ~ ***注目されている理由 -メンテナンスが楽 画像ではないので、コードを書き変えるだけで図の更新ができ... -Gitとの相性が良い テキストデータなので GitHub や Notion などで差分を管理し... -学習コストが低い 「A --> B」と書けば矢印が引ける・・など直感的で覚えやすい。 ~ ~ **コードサンプル Mermaidの中で最もよく使われるフローチャートを例に、実際の... ~ ***基本的な構成要素 graph TD：図の方向（上から下）を指定 graph LR：図の方向（左から右）を指定 [ ]：四角いノード（工程） { }：ひし形のノード（条件分岐） (( ))：丸いノード（開始/終了など） -->：矢印（流れ） ~ ***サンプルコード 判断分岐を含むフローチャートの事例 #image(FlowChart.png,right,30%); graph TD A(朝起きる) --> B[顔を洗う] B --> C{眠いですか？} C -- 眠い --> D[コーヒーを入れて飲む] C -- 眠くない --> E[執筆をはじめる] D --> E E --> F(完了) #clear ~ **作図ツールと手順 Mermaidは一般に普及しているため、専用ソフトをインストール... -生成AI（ChatGPT / Gemini など） 「以下の内容をMermaid記法で出力して」と頼むとコードが生成... -__[[Mermaid Live Editor>https://mermaid.live]]__ 公式サイトのブラウザエディタ。図の生成を即試すことができ... 図は、PNG形式やSVG形式で保存可能です。 -VS Code拡張機能 「Markdown Preview Mermaid Support」を入れると、プレビュ... -Notion /mermaid と入力してブロックを作成し、コードを貼り付けるだ... -GitHub .md ファイル内で「```mermaid」と「 ```」で囲むだけで、リ... ~ ~ **生成AI時代の Mermaid記法 今、Mermaidが改めて注目されている最大の理由は「AIとの相性... -AIが「描画」できる共通言語： AIは画像を直接ゼロから正確に描く（文字化けせずにフローを... -プロンプトによる一括修正： 「このフローに『承認ステップ』を追加して」とAIに頼めば、A... -トークン効率が良い： 画像データを読み込ませるよりも、軽量なテキストであるMerma... ~ ~ **APPENDIX Mermaidを使いこなす上で知っておくと便利なキーワード -__[[Markdown]]__ Mermaidが埋め込まれるベースとなる文書形式。エンジニアの標... -Text-to-Diagram 「文字から図を作る」という考え方そのもの。Mermaidはその代... -PlantUML： Mermaidと同様の存在。より複雑で高度な図が書けます（環境構... -__[[SVG]]__（Scalable Vector Graphics）： Mermaidが生成するグラフィックデータの形式（ベクトルデータ） ~ ~

ページ名: