mermaid-visualizer by axtonliu/axton-obsidian-visual-skills
npx skills add https://github.com/axtonliu/axton-obsidian-visual-skills --skill mermaid-visualizer将文本内容转换为简洁、专业的 Mermaid 图表,优化用于演示和文档。自动处理常见的语法陷阱(列表语法冲突、子图命名、间距问题),以确保图表在 Obsidian、GitHub 和其他兼容 Mermaid 的平台上正确渲染。
创建 Mermaid 图表时:
默认假设:
最适合: 工作流、决策树、顺序流程、AI 智能体架构
使用场景: 内容描述步骤、阶段或一系列操作时
主要特点:
配置选项:
layout: "vertical" (TB), "horizontal" (LR)广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
detail: "simple" (仅核心步骤), "standard" (带描述), "detailed" (带注释)style: "minimal", "professional", "colorful"最适合: 循环过程、持续改进循环、智能体反馈系统
使用场景: 内容强调迭代、反馈或循环关系时
主要特点:
最适合: 前后对比、A vs B 分析、传统与现代系统对比
使用场景: 内容对比两种或多种方法或系统时
主要特点:
最适合: 层级概念、知识组织、主题分解
使用场景: 内容具有清晰的父子层级关系时
主要特点:
最适合: 组件间交互、API 调用、消息流
使用场景: 内容涉及参与者/系统随时间进行的通信时
主要特点:
最适合: 系统状态、状态转换、生命周期阶段
使用场景: 内容描述状态及其之间的转换时
主要特点:
始终遵循这些规则以防止解析错误:
❌ WRONG: [1. Perception] → Triggers "Unsupported markdown: list"
✅ RIGHT: [1.Perception] → Remove space after period
✅ RIGHT: [① Perception] → Use circled numbers (①②③④⑤⑥⑦⑧⑨⑩)
✅ RIGHT: [(1) Perception] → Use parentheses
✅ RIGHT: [Step 1: Perception] → Use "Step" prefix
❌ WRONG: subgraph AI Agent Core → Space in name without quotes
✅ RIGHT: subgraph agent["AI Agent Core"] → Use ID with display name
✅ RIGHT: subgraph agent → Use simple ID only
❌ WRONG: Title --> AI Agent Core → Reference display name directly
✅ RIGHT: Title --> agent → Reference subgraph ID
✅ Use quotes for text with spaces: ["Text with spaces"]
✅ Escape or avoid: quotation marks → use 『』instead
✅ Escape or avoid: parentheses → use 「」instead
✅ Line breaks in circle nodes only: ((Text<br/>Break))
--> 实线箭头-.-> 虚线箭头(用于支持系统、可选路径)==> 粗箭头(用于强调)~~~ 不可见链接(仅用于布局)完整的语法参考和边缘情况,请参阅 references/syntax-rules.md
所有图表都接受这些参数:
布局:
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: true/false - 包含颜色/符号图例numbered: true/false - 为步骤添加序号title: string - 添加图表标题模式 1:基本请求
User: "Visualize the software development lifecycle"
Response: [Analyze → Choose graph TB → Generate with standard detail]
模式 2:带配置
User: "Create a horizontal flowchart of our sales process with lots of detail"
Response: [Analyze → Choose graph LR → Generate with detailed level]
模式 3:对比
User: "Compare traditional AI vs AI agents"
Response: [Analyze → Choose comparison layout → Generate with contrasting styles]
* 识别主要概念、实体和关系
* 确定层次结构或顺序
* 注意任何比较或对比
2. 选择图表类型
* 将内容结构与图表类型匹配
* 考虑用户的演示上下文
* 如果不明确,默认使用流程图表
3. 选择配置
* 应用用户指定的选项
* 对未指定的选项使用合理的默认值
* 优化可读性
4. 生成 Mermaid 代码
* 严格遵守所有语法规则
* 使用语义命名(描述性 ID)
* 应用一致的样式
* 测试常见错误:
* 节点文本中没有 "数字. 空格" 模式
* 所有子图都使用 ID["显示名称"] 格式
* 所有节点引用都使用 ID 而不是显示名称
5. 输出上下文
* 用 ```mermaid 代码块包裹
* 添加图表结构的简要说明
* 提及渲染兼容性(Obsidian、GitHub 等)
* 提供调整或创建变体的选项
标准专业调色板:
graph TB
subgraph core["Core Process"]
A --> B --> C
end
subgraph support["Supporting Systems"]
D
E
end
core -.-> support
graph TB
A[Start] --> B[Process]
B --> C[End]
C -.->|Feedback| A
graph TB
Central[Hub]
A[Spoke 1] --> Central
B[Spoke 2] --> Central
C[Spoke 3] --> Central
输出前,请验证:
详细的语法规则和故障排除,请参阅:
每周安装数
377
仓库
GitHub Stars
1.8K
首次出现
Jan 20, 2026
安全审计
安装于
opencode330
gemini-cli297
codex296
claude-code296
cursor241
github-copilot233
Convert text content into clean, professional Mermaid diagrams optimized for presentations and documentation. Automatically handles common syntax pitfalls (list syntax conflicts, subgraph naming, spacing issues) to ensure diagrams render correctly in Obsidian, GitHub, and other Mermaid-compatible platforms.
When creating a Mermaid diagram:
Default assumptions:
Best for: Workflows, decision trees, sequential processes, AI agent architectures
Use when: Content describes steps, stages, or a sequence of actions
Key features:
Configuration options:
layout: "vertical" (TB), "horizontal" (LR)detail: "simple" (core steps only), "standard" (with descriptions), "detailed" (with annotations)style: "minimal", "professional", "colorful"Best for: Cyclic processes, continuous improvement loops, agent feedback systems
Use when: Content emphasizes iteration, feedback, or circular relationships
Key features:
Best for: Before/after comparisons, A vs B analysis, traditional vs modern systems
Use when: Content contrasts two or more approaches or systems
Key features:
Best for: Hierarchical concepts, knowledge organization, topic breakdowns
Use when: Content is hierarchical with clear parent-child relationships
Key features:
Best for: Interactions between components, API calls, message flows
Use when: Content involves communication between actors/systems over time
Key features:
Best for: System states, status transitions, lifecycle stages
Use when: Content describes states and transitions between them
Key features:
Always follow these rules to prevent parsing errors:
❌ WRONG: [1. Perception] → Triggers "Unsupported markdown: list"
✅ RIGHT: [1.Perception] → Remove space after period
✅ RIGHT: [① Perception] → Use circled numbers (①②③④⑤⑥⑦⑧⑨⑩)
✅ RIGHT: [(1) Perception] → Use parentheses
✅ RIGHT: [Step 1: Perception] → Use "Step" prefix
❌ WRONG: subgraph AI Agent Core → Space in name without quotes
✅ RIGHT: subgraph agent["AI Agent Core"] → Use ID with display name
✅ RIGHT: subgraph agent → Use simple ID only
❌ WRONG: Title --> AI Agent Core → Reference display name directly
✅ RIGHT: Title --> agent → Reference subgraph ID
✅ Use quotes for text with spaces: ["Text with spaces"]
✅ Escape or avoid: quotation marks → use 『』instead
✅ Escape or avoid: parentheses → use 「」instead
✅ Line breaks in circle nodes only: ((Text<br/>Break))
--> solid arrow-.-> dashed arrow (for supporting systems, optional paths)==> thick arrow (for emphasis)~~~ invisible link (for layout only)For complete syntax reference and edge cases, see references/syntax-rules.md
All diagrams accept these parameters:
Layout:
direction: "vertical" (TB), "horizontal" (LR), "right-to-left" (RL), "bottom-to-top" (BT)aspect: "portrait" (default), "landscape" (wide), "square"Detail Level:
simple: Core elements only, minimal labelsstandard: Balanced detail with key descriptions (default)detailed: Full annotations, explanations, and metadatapresentation: Optimized for slides (larger text, fewer details)Style:
minimal: Monochrome, clean linesprofessional: Semantic colors, clear hierarchy (default)colorful: Vibrant colors, high contrastacademic: Formal styling for papers/documentationAdditional Options:
show_legend: true/false - Include color/symbol legendnumbered: true/false - Add sequence numbers to stepstitle: string - Add diagram titlePattern 1: Basic request
User: "Visualize the software development lifecycle"
Response: [Analyze → Choose graph TB → Generate with standard detail]
Pattern 2: With configuration
User: "Create a horizontal flowchart of our sales process with lots of detail"
Response: [Analyze → Choose graph LR → Generate with detailed level]
Pattern 3: Comparison
User: "Compare traditional AI vs AI agents"
Response: [Analyze → Choose comparison layout → Generate with contrasting styles]
Understand the content
Select diagram type
Choose configuration
Generate Mermaid code
Output with context
Standard professional palette:
graph TB
subgraph core["Core Process"]
A --> B --> C
end
subgraph support["Supporting Systems"]
D
E
end
core -.-> support
graph TB
A[Start] --> B[Process]
B --> C[End]
C -.->|Feedback| A
graph TB
Central[Hub]
A[Spoke 1] --> Central
B[Spoke 2] --> Central
C[Spoke 3] --> Central
Before outputting, verify:
For detailed syntax rules and troubleshooting, see:
Weekly Installs
377
Repository
GitHub Stars
1.8K
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode330
gemini-cli297
codex296
claude-code296
cursor241
github-copilot233
品牌叙事指南:30位专家教你打造难忘品牌故事 | 品牌营销与内容创作
1,000 周安装
Notion规范转实现计划工具:AI驱动项目管理,自动生成任务与跟踪进度
446 周安装
Three.js 3D Web开发教程 - WebGL/WebGPU图形编程、动画与性能优化指南
447 周安装
批判性思维与逻辑推理指南 - 提升AI智能体分析能力,避免信号稀释与语境坍塌
447 周安装
Tailwind v4 + shadcn/ui 生产级技术栈配置指南:5分钟快速搭建,避免常见错误
447 周安装
React Native 测试模式与工具:TDD、工厂模式、模拟模块实战指南
447 周安装
SaaS收入增长指标框架:产品经理必备的收入、留存与扩张指标指南
448 周安装