Browse Source

```
feat(mermaid): 更新流程图示例以支持新形状和边缘ID

- 添加了新形状示例(manual-file、manual-input、docs、procs、paper-tape)
- 添加了边缘ID和曲线样式的新功能示例
- 为新功能添加了版本兼容性说明
- 提供了linkStyle的替代方案以确保向后兼容
- 将流程方向从TD更改为RL以展示不同布局
```

wandl-6A72h 9 months ago
parent
commit
c2370dfada
1 changed files with 24 additions and 13 deletions
  1. 24 13
      skills/mermaid/examples/flowchart.md

+ 24 - 13
skills/mermaid/examples/flowchart.md

@@ -244,28 +244,39 @@ flowchart TD
 
 
 ### Example (With New Shapes - v11.3.0+)
 ### Example (With New Shapes - v11.3.0+)
 
 
-```mermaid
-flowchart TD
-    A@{ shape: cloud, label: "Cloud" }
-    B@{ shape: diam, label: "Decision" }
-    C@{ shape: cyl, label: "Database" }
-    D@{ shape: bang, label: "Event" }
+**Note**: New shapes require Mermaid v11.3.0+. If your environment doesn't support new shapes, use traditional shapes instead.
 
 
-    A --> B
-    B --> C
-    C --> D
+```mermaid
+flowchart RL
+    A@{ shape: manual-file, label: "File Handling"}
+    B@{ shape: manual-input, label: "User Input"}
+    C@{ shape: docs, label: "Multiple Documents"}
+    D@{ shape: procs, label: "Process Automation"}
+    E@{ shape: paper-tape, label: "Paper Records"}
 ```
 ```
 
 
 ### Example (With Edge IDs and Curve Styles - v11.10.0+)
 ### Example (With Edge IDs and Curve Styles - v11.10.0+)
 
 
+**Note**: Edge ID syntax requires Mermaid v11.10.0+. If your environment doesn't support edge IDs, use linkStyle instead (shown in alternative below).
+
+```mermaid
+flowchart LR
+    A e1@==> B
+    A e2@--> C
+    e1@{ curve: linear }
+    e2@{ curve: natural }
+```
+
+**Alternative (Using linkStyle - Compatible with all versions):**
+
 ```mermaid
 ```mermaid
 flowchart LR
 flowchart LR
     A[Start]
     A[Start]
     B[Process]
     B[Process]
     C[End]
     C[End]
-    A -->|Step 1|e1[ID] B
-    B -->|Step 2|e2[ID] C
+    A -->|Step 1| B
+    B -->|Step 2| C
 
 
-    e1.curve = "stepBefore"
-    e2.curve = "stepAfter"
+    linkStyle 0 stroke:#333,stroke-width:2px
+    linkStyle 1 stroke:#333,stroke-width:2px
 ```
 ```