advanced-features

# Mermaid 高级功能 用于创建专业图表的高级配置、样式、主题及其他强大功能。 ## Frontmatter 配置 在图表顶部添加 YAML 配置： mermaid --- config: theme: dark themeVariables: primaryColor: "#ff6b6b" primaryTextColor: "#fff" primaryBorderColor: "#333" lineColor: "#666" secondaryColor: "#4ecdc4" tertiaryColor: "#ffe66d" --- flowchart TD A --> B ## 主题 ### 内置主题 mermaid --- config: theme: default --- **可用主题：** - `default` - 标准蓝色主题 - `forest` - 绿色大地色调 - `dark` - 深色模式友好 - `neutral` - 灰度专业风格 - `base` - 用于自定义的最小基础主题 ### 主题示例 **默认主题：** mermaid --- config: theme: default --- flowchart LR A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[Action 1] C -->|No| E[Action 2] **深色主题：** mermaid --- config: theme: dark --- flowchart LR A[Start] --> B[Process] B --> C{Decision} **森林主题：** mermaid --- config: theme: forest --- flowchart LR A[Start] --> B[Process] ## 自定义主题变量 覆盖特定颜色： mermaid --- config: theme: base themeVariables: primaryColor: "#ff6b6b" primaryTextColor: "#fff" primaryBorderColor: "#d63031" lineColor: "#74b9ff" secondaryColor: "#00b894" tertiaryColor: "#fdcb6e" background: "#f0f0f0" mainBkg: "#ffffff" textColor: "#333333" nodeBorder: "#333333" clusterBkg: "#f9f9f9" clusterBorder: "#666666" --- flowchart TD A --> B --> C ## 布局选项 ### Dagre 布局 (默认) mermaid --- config: layout: dagre --- flowchart TD A --> B ### ELK 布局 (高级) 用于具有更好自动布局的复杂图表： mermaid --- config: layout: elk elk: mergeEdges: true nodePlacementStrategy: BRANDES_KOEPF --- flowchart TD A --> B **ELK 节点放置策略：** - `SIMPLE` - 基础放置 - `NETWORK_SIMPLEX` - 网络优化 - `LINEAR_SEGMENTS` - 线性排列 - `BRANDES_KOEPF` - 平衡 (默认) ## 外观选项 ### 经典外观 传统的 Mermaid 外观： mermaid --- config: look: classic --- flowchart LR A --> B --> C ### 手绘外观 草图风格，非正式样式： mermaid --- config: look: handDrawn --- flowchart LR A --> B --> C ## 完整配置