用途
Mermaid Visualizer 用于将文本内容转换为整洁、专业的 Mermaid 图表,针对演示文稿和文档场景进行了优化。它会自动处理常见的语法陷阱(列表语法冲突、子图命名、间距问题),确保图表在 Obsidian、GitHub 及其他兼容 Mermaid 的平台上正确渲染。
主要能力
该技能支持以下图表类型:
- 流程图(graph TB/LR):适用于工作流、决策树、顺序流程、AI 智能体架构。支持通过 subgraph 实现泳道分组、箭头标签、反馈循环与分支、颜色编码阶段。
- 循环流程(graph TD 循环布局):适用于循环过程、持续改进循环、智能体反馈系统。包含中心枢纽与辐射元素、曲线反馈箭头、清晰的循环指示。
- 对比图(graph TB 并行路径):适用于前后对比、A 与 B 分析、传统与现代系统对比。包含并排布局、中心对比节点、通过颜色/样式区分。
- 思维导图:适用于层级概念、知识组织、主题拆解。包含径向树结构、多级嵌套、清晰的视觉层级。
- 时序图:适用于组件间交互、API 调用、消息流。包含基于时间线的布局、清晰的参与者分离、进程激活框。
- 状态图:适用于系统状态、状态转换、生命周期阶段。包含清晰的状态节点、带标签的转换、开始与结束状态。
使用方式
创建 Mermaid 图表时的快速流程:
- 分析内容:识别关键概念、关系和流程。
- 选择图表类型:选择最合适的可视化形式。
- 选择配置:确定布局、细节层级和样式。
- 生成图表:创建语法正确的 Mermaid 代码。
- 以 Markdown 输出:用正确的代码围栏包裹,可选附上说明。
默认假设:
- 除非要求水平布局,否则使用垂直布局(TB)。
- 中等细节层级(在简洁与信息量之间平衡)。
- 使用带语义颜色的专业配色方案。
- 兼容 Obsidian/GitHub 的语法。
配置选项包括:
- 布局:direction(vertical/TB、horizontal/LR、right-to-left/RL、bottom-to-top/BT)、aspect(portrait 默认、landscape、square)。
- 细节层级:simple(仅核心元素)、standard(默认,平衡细节)、detailed(完整注释)、presentation(针对幻灯片优化)。
- 样式:minimal(单色)、professional(默认,语义颜色)、colorful(鲜艳高对比)、academic(正式风格)。
- 附加选项:show_legend(是否包含图例)、numbered(是否添加序号)、title(图表标题)。
关键语法规则
为避免解析错误,需遵循以下规则:
规则 1:避免列表语法冲突。错误写法 [1. Perception] 会触发“Unsupported markdown: list”。正确写法包括 [1.Perception](去掉句点后空格)、[① Perception](使用带圈数字)、[(1) Perception](使用括号)、[Step 1: Perception](使用 Step 前缀)。
规则 2:子图命名。错误写法 subgraph AI Agent Core(名称含空格且无引号)。正确写法 subgraph agent["AI Agent Core"](使用 ID 加显示名)或 subgraph agent(仅使用简单 ID)。
规则 3:节点引用。错误写法 Title --> AI Agent Core(直接引用显示名)。正确写法 Title --> agent(引用子图 ID)。
规则 4:节点文本中的特殊字符。含空格的文本使用引号 ["Text with spaces"];引号建议改用 『』;括号建议改用 「」;换行仅在圆形节点中使用 ((Text<br/>Break))。
规则 5:箭头类型。--> 实线箭头;-.-> 虚线箭头(用于支撑系统、可选路径);==> 粗箭头(用于强调);~~~ 不可见链接(仅用于布局)。
适用场景
适用于需要将文本概念、流程、层级结构、交互关系或状态转换可视化的场景,尤其是面向演示文稿和文档的图表制作。常见使用模式包括:基本请求(如“可视化软件开发生命周期”)、带配置的请求(如“创建销售流程的水平流程图,细节丰富”)、对比请求(如“对比传统 AI 与 AI 智能体”)。
限制
资料中未提供关于收费、价格、平台支持范围、性能效果等方面的具体信息。该技能依赖 Mermaid 兼容的渲染平台(如 Obsidian、GitHub)。节点文本中不应使用 Emoji,应改用文本标签或颜色编码。输出前需检查是否存在“数字. 空格”模式、子图语法、箭头语法、颜色一致性、布局方向、样式声明、节点引用歧义等问题。