axton-obsidian-visual-skills 的 Mermaid 可视化实战：流程图、时序图、状态图等6种图表选型与配置清单

axton-obsidian-visual-skills 的 Mermaid 可视化实战流程图、时序图、状态图等6种图表选型与配置清单【免费下载链接】axton-obsidian-visual-skillsVisual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code项目地址: https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skillsaxton-obsidian-obsidian-visual-skills 是一款面向 Claude Code 的 Obsidian 可视化 Skills 套装核心能力是把一段文字自动转成 Mermaid 图表、Canvas 画布和 Excalidraw 手绘图。本文聚焦其中的 Mermaid 可视化器给你一份 6 种图表类型选型 配置参数的实战清单帮你一次性生成渲染不出错的专业图表。为什么选 Mermaid 做可视化 Mermaid 的最大优势是用文字描述图表图表本质是一段文本可以直接写在 Markdown 里Obsidian、GitHub 等都能原生渲染无需依赖图形编辑器。mermaid-visualizer技能见 mermaid-visualizer/SKILL.md在此基础上做了三件新手最需要的事内置语法错误预防自动规避编号列表冲突、subgraph 命名、特殊字符等常见渲染报错语义化配色方案输入用绿色、决策用红色、处理用紫色颜色即含义可配置布局垂直/水平方向、简洁/详细程度、多种风格一键切换完整的技能定义位于 mermaid-visualizer/SKILL.md语法速查见 mermaid-visualizer/references/syntax-rules.md。6种 Mermaid 图表类型选型清单技能内置 6 种图表类型详见 mermaid-visualizer/SKILL.md按内容结构对号入座即可图表类型核心结构最适合的场景典型例子流程图(graph TB/LR)泳道分组、决策分支、反馈回路工作流、决策树、AI Agent 架构CI/CD 发布流程、审批链路循环图中心节点 环形反馈箭头迭代过程、反馈循环、持续改进PDCA 循环、Agent 自我优化对比图双路并行 中央对比节点A vs B、前后对比传统系统 vs 现代系统思维导图放射状多层嵌套层级概念、知识组织主题分类、课程大纲时序图时间轴 角色泳道 激活框组件交互、API 调用、消息流API 认证流程、微服务通信状态图状态节点 带标签的转换箭头系统状态、生命周期阶段订单状态机、工单流转一句话选型口诀有步骤用流程图有交互用时序图有状态变化用状态图有层级用思维导图在迭代用循环图在做比较用对比图。拿不准技能默认会退到流程图。配置参数速查表布局、详细度与风格所有图表都支持同一套配置参数定义见 mermaid-visualizer/SKILL.md按需组合即可参数可选值说明方向directionvertical(TB) / horizontal(LR) / RL / BT默认垂直PPT 横版建议 LR比例aspectportrait(默认) / landscape / square宽屏演示选 landscape详细度detailsimple / standard(默认) / detailed / presentation演讲幻灯片推荐 presentation字大、细节少风格styleminimal / professional(默认) / colorful / academic论文场景选 academic附加项show_legend图例 /numbered步骤编号 /title标题可任意组合语义配色颜色自带含义技能内置专业配色见 mermaid-visualizer/SKILL.md无需手动指定 绿色输入、感知、起始状态 红色规划、决策点 紫色处理、推理 橙色动作、工具调用 青色输出、执行结果 黄色存储、记忆、数据⚪ 灰色中性元素、传统系统语法避坑清单新手渲染报错高发区手写 Mermaid 最容易翻车的几个语法点技能已全部内置规避完整规则见 mermaid-visualizer/references/syntax-rules.md#常见坑❌ 错误写法✅ 正确写法1编号触发列表解析报错Unsupported markdown: list[1. 感知][1.感知]或[① 感知]或[Step 1: 感知]2subgraph 带空格不引用subgraph AI Agent 核心subgraph agent[AI Agent 核心]3节点引用显示名标题 -- AI Agent 核心标题 -- agent引用 ID4特殊字符双引号、圆括号直接写引号换『』括号换「」换行仅圆形节点支持br/5箭头类型用错全部用实线实线--、虚线-.-辅助路径、粗线强调小贴士节点文字控制在 50 字符以内、子图嵌套不超过 2 层是保持图表可读性的两条经验法则。技能自带输出前自检清单见 Quality Checklist确保图表在 Obsidian / GitHub 渲染器上都能正常显示。快速上手一行触发词生成图表安装步骤最快方式前置要求已安装 Claude Code CLI 和 Obsidian。推荐使用插件市场一键安装见 README_CN.md/plugin marketplace add axtonliu/axton-obsidian-visual-skills /plugin install obsidian-visual-skills安装后重启 Claude Code 即可。如果偏好手动安装可克隆仓库后将 mermaid-visualizer/ 目录复制到~/.claude/skills/详见 README_CN.md。触发词与话术模板触发词Mermaid、可视化、流程图、时序图、visualize。安装后直接用自然语言请求把这个工作流程转成 Mermaid 图表为 API 认证流程创建一个时序图画一个水平方向、详细版的销售流程 Mermaid 流程图对比传统 AI 与 AI Agent生成对比图配置项可以直接用中文写在请求里方向、详细度、风格技能会自动解析并套用默认值补齐。关键文件导航文件作用mermaid-visualizer/SKILL.mdMermaid 技能主定义6 种图表类型、配置项、配色、自检清单mermaid-visualizer/references/syntax-rules.md完整语法参考与错误排查手册节点、subgraph、箭头、样式README_CN.md项目中文说明三大技能对比、安装方式、常见问题LICENSEMIT 许可证小结axton-obsidian-visual-skills 把文字变图表这件新手容易踩坑的事收敛成了一次对话选对图表类型6 选 1、带上配置参数方向 详细度 风格、剩下的语法避坑交给技能。建议从流程图开始练手再逐步尝试时序图与状态图很快就能在 Obsidian 里搭起自己的可视化工作流 【免费下载链接】axton-obsidian-visual-skillsVisual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code项目地址: https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考