docs(mermaid): 更新技能文档中的图表类型和版本兼容性信息

- 更新 C4 图表类型的可用选项列表
- 为架构图、雷达图和树状图添加版本兼容性要求说明
- 在重要注意事项部分增加版本兼容性检查提示
- 为甘特图日期格式添加具体格式要求 (YYYY-MM-DD)
- 为 ER 图、流程图和类图添加命名约定和语法验证规则
- 新增版本兼容性章节说明不同图表类型的版本要求
- 添加最佳实践指南包括代码块使用、兼容性检查和文件组织建议

skills/mermaid/SKILL.md

@@ -36,7 +36,7 @@ To create a Mermaid diagram:
    - Quadrant chart/象限图 → `quadrantChart`
    - Requirement diagram/需求图 → `requirementDiagram`
    - Git graph/Git图 → `gitGraph`
-   - C4 diagram/C4图 → `C4Context` or other C4 types
+   - C4 diagram/C4图 → `C4Context`, `C4Container`, `C4Component`, `C4Deployment`, or `C4Dynamic`
    - Mindmap/思维导图 → `mindmap`
    - Timeline/时间线图 → `timeline`
    - ZenUML/禅UML → `zenuml`
@@ -45,9 +45,9 @@ To create a Mermaid diagram:
    - Block diagram/方块图 → `block`
    - Packet diagram/数据包图 → `packet`
    - Kanban/看板图 → `kanban`
-   - Architecture diagram/架构图 → `architecture-beta`
-   - Radar chart/雷达图 → `radar-beta`
-   - Treemap/树状图 → `treemap-beta`
+   - Architecture diagram/架构图 → `architecture-beta` (requires Mermaid v11.1.0+)
+   - Radar chart/雷达图 → `radar-beta` (requires Mermaid v11.1.0+)
+   - Treemap/树状图 → `treemap-beta` (requires Mermaid v11.1.0+)
 
 2. **Load the appropriate example file** from the `examples/` directory:
    - `examples/flowchart.md` - For flowcharts and process diagrams
@@ -76,6 +76,11 @@ To create a Mermaid diagram:
 
 3. **Follow the specific instructions** in that example file for syntax, structure, and best practices
 
+   **Important Notes**:
+   - Beta diagram types (`architecture-beta`, `radar-beta`, `treemap-beta`) require Mermaid v11.1.0 or higher
+   - If the rendering environment doesn't support beta diagram types, use the flowchart alternatives provided in the example files
+   - Always check the example file for version compatibility notes and alternative syntax options
+
 4. **Generate the Mermaid code** wrapped in a Markdown code block with proper syntax highlighting:
    
    **IMPORTANT**: Always wrap the Mermaid code in a Markdown code block with `mermaid` language tag. This ensures the format is preserved when users copy the content.
@@ -102,8 +107,12 @@ To create a Mermaid diagram:
 6. **Validate the syntax**:
    - Ensure all required elements are present
    - Check that relationships and connections are properly defined
-   - Verify date formats for Gantt charts
+   - Verify date formats for Gantt charts (YYYY-MM-DD)
    - Confirm data formats for charts (pie, quadrant, etc.)
+   - For ER diagrams: Use underscores instead of hyphens in entity names (e.g., `LINE_ITEM` not `LINE-ITEM`)
+   - For flowcharts: Avoid using "end" as a node label (use "End" or "END" instead)
+   - For class diagrams: Escape special characters in labels using backticks
+   - Check version compatibility for beta diagram types
 
 7. **Save the diagram to project directory**:
    - **Default behavior**: When generating a Mermaid diagram, save it to the current project directory
@@ -143,6 +152,33 @@ When generating a diagram, follow this response structure:
 
 If the diagram type doesn't match any existing example, refer to the Mermaid documentation or ask the user for clarification about the desired visualization.
 
+## Version Compatibility
+
+Some diagram types have specific version requirements:
+
+- **Beta diagram types** (require Mermaid v11.1.0+):
+  - `architecture-beta` - Architecture diagrams
+  - `radar-beta` - Radar charts
+  - `treemap-beta` - Treemap diagrams
+
+- **Advanced features** (require specific versions):
+  - Participant types with JSON configuration: Mermaid v10.0.0+
+  - Actor creation/destruction: Mermaid v10.3.0+
+  - Edge IDs and curve styles: Mermaid v11.10.0+
+  - New shapes with `@{}` syntax: Mermaid v11.3.0+
+
+If a beta diagram type is not supported, the example files provide flowchart alternatives that work with all Mermaid versions.
+
+## Best Practices
+
+1. **Always use code blocks**: Wrap all Mermaid code in Markdown code blocks with `mermaid` language tag
+2. **Check compatibility**: Verify version requirements before using beta diagram types
+3. **Use alternatives**: When beta types aren't supported, use the provided flowchart alternatives
+4. **Follow naming conventions**: Avoid reserved keywords and special characters in node labels
+5. **Test syntax**: Validate diagram syntax before saving to ensure proper rendering
+6. **Organize files**: Save diagrams in appropriate directories (`docs/diagrams/` or `diagrams/`)
+7. **Use descriptive names**: Name diagram files clearly (e.g., `system-architecture.md`, `user-flow.md`)
+
 ## Keywords
 
 mermaid, diagram, flowchart, flow chart, sequence diagram, class diagram, state diagram, entity relationship, ER diagram, user journey, Gantt chart, pie chart, quadrant chart, requirement diagram, Git graph, C4 diagram, mindmap, timeline, ZenUML, Sankey diagram, XY chart, block diagram, packet diagram, Kanban, architecture diagram, radar chart, treemap, 流程图, 时序图, 类图, 状态图, 实体关系图, 用户旅程图, 甘特图, 饼图, 象限图, 需求图, Git图, C4图, 思维导图, 时间线图, 桑基图, XY图, 方块图, 数据包图, 看板图, 架构图, 雷达图, 树状图