生成 AI に作成してもらった mermaid が Syntax Error になったら

mermaid 記法を覚えるのが正しいのですが・・・。
面倒で。

Prompt：

AI について、用語がよくわかっていません。ツリー表示にしてください。
対話型 AI
LLM
AI エージェント

---

AI の回答：

graph TD
A[【広範な概念】<br>AI (人工知能)] –> B[【中核技術/エンジン】<br>LLM (大規模言語モデル)];
B –> C[【応用形態 1】<br>対話型 AI];
B –> D[【応用形態 2】<br>AI エージェント];

subgraph ” “
direction TB
B
C
D
end

style A fill:#e6f7ff,stroke:#b3e0ff,stroke-width:2px
style B fill:#e6ffe6,stroke:#b3ffb3,stroke-width:2px
style C fill:#fff0e6,stroke:#ffccb3,stroke-width:2px
style D fill:#fffbe6,stroke:#fff0b3,stroke-width:2px

---

これをもとに ai.md ファイルを作成するが、
（「``` mermaid」 と「```」で囲む）

---

ai.md の内容：

``` mermaid
graph TD
    A[【広範な概念】<br>AI (人工知能)] --> B[【中核技術/エンジン】<br>LLM (大規模言語モデル)];
    B --> C[【応用形態 1】<br>対話型 AI];
    B --> D[【応用形態 2】<br>AI エージェント];

    subgraph " "
        direction TB
        B
        C
        D
    end

    style A fill:#e6f7ff,stroke:#b3e0ff,stroke-width:2px
    style B fill:#e6ffe6,stroke:#b3ffb3,stroke-width:2px
    style C fill:#fff0e6,stroke:#ffccb3,stroke-width:2px
    style D fill:#fffbe6,stroke:#fff0b3,stroke-width:2px

```

---

これを、md(mermaid 対応)ビューアーで開くとこうなってしまうことがある

---

---

そんな場合、問題なく表示できるコードをサンプルと提示してあげる

---

Prompt：

AI について、用語がよくわかっていません。ツリー表示にしてください。
対話型 AI
LLM
AI エージェント

このコードを参考に mermaid 記法にしてください。

``` mermaid
%%{init: {
  "themeVariables": {
    "fontFamily": "Noto Sans JP, Hiragino Sans, 'Yu Gothic Medium','Yu Gothic', Meiryo, 'MS PGothic', sans-serif"
  }
}}%%
graph TD
    A["Q. 共通プロンプト<br>『社内の業務プロセスを改善するための提案を3つ挙げて下さい。』"];

    A --> B("ChatGPT (GPT-5)");
    A --> C("Claude");
    A --> D("Gemini");

    %% ChatGPT
    B --> B0["Temp=0<br>自動化・情報共有・会議短縮<br><b>特徴：</b>安定・再現性高い"];
    B --> B1["Temp=1<br>AIチームメイト・ダッシュボード・改善文化<br><b>特徴：</b>創造性・構想性"];

    %% Claude
    C --> C0["Temp=0<br>作業自動化・共有の透明化・会議の目的明確化<br><b>特徴：</b>柔らかい表現で安定"];
    C --> C1["Temp=1<br>フィードバック文化・AIパートナー育成<br><b>特徴：</b>共感的・感情表現の揺れ"];

    %% Gemini
    D --> D0["Temp=0<br>プロセス可視化・自動レポート・標準化<br><b>特徴：</b>技術的・実装指向で安定"];
    D --> D1["Temp=1<br>IoT/リアルタイム最適化・学習型ナレッジ<br><b>特徴：</b>技術革新志向・新要素が増えやすい"];

    %% クラス定義（色分け）
    classDef t0 fill:#e6f2ff,stroke:#1d4ed8,stroke-width:2px;
    classDef t1 fill:#fff7e6,stroke:#b45309,stroke-width:2px;

    %% クラス適用
    class B0,C0,D0 t0;
    class B1,C1,D1 t1;
```

---

AI の回答：

graph TD
    A["【広範な概念】<br>AI (人工知能)"] --> B["【中核技術/エンジン】<br>LLM (大規模言語モデル)"];
    B --> C["【応用形態 1】<br>対話型 AI"];
    B --> D["【応用形態 2】<br>AI エージェント"];

    %% クラス定義（色分け）
    classDef root fill:#e6f7ff,stroke:#b3e0ff,stroke-width:2px;
    classDef core fill:#e6ffe6,stroke:#b3ffb3,stroke-width:2px;
    classDef app1 fill:#fff0e6,stroke:#ffccb3,stroke-width:2px;
    classDef app2 fill:#fffbe6,stroke:#fff0b3,stroke-width:2px;

    %% クラス適用
    class A root;
    class B core;
    class C app1;
    class D app2;

---

もう一度、ai.md ファイルを作成（「“` mermaid」 と「“`」で囲む）

• 「“`mermaid」「“` mermaid」（半角スペース有無はどちらでも良い）
  • Syntax Error 発生時は、半買うスペースもも試す
• 「“` mermaid<改行>」の下は、空行があってもよさそう
  • Syntax Error 発生時は、空行も試す
• 末尾の「“`」の上は、空行があってもよさそう
  • Syntax Error 発生時は、空行も試す

ai.md の内容：

``` mermaid
graph TD
    A["【広範な概念】<br>AI (人工知能)"] --> B["【中核技術/エンジン】<br>LLM (大規模言語モデル)"];
    B --> C["【応用形態 1】<br>対話型 AI"];
    B --> D["【応用形態 2】<br>AI エージェント"];

    %% クラス定義（色分け）
    classDef root fill:#e6f7ff,stroke:#b3e0ff,stroke-width:2px;
    classDef core fill:#e6ffe6,stroke:#b3ffb3,stroke-width:2px;
    classDef app1 fill:#fff0e6,stroke:#ffccb3,stroke-width:2px;
    classDef app2 fill:#fffbe6,stroke:#fff0b3,stroke-width:2px;

    %% クラス適用
    class A root;
    class B core;
    class C app1;
    class D app2;

```

---

md(mermaid 対応)ビューアーで開くと

---

他の正常結果の事例をサンプルとして誘導してみる。