Markdown Viewer Agent Skills

Markdown Viewer Agent Skills 是一套专为 AI 编码代理（如 Claude Code, Cursor, Codex 等）设计的技能包。它赋予 AI 直接在 Markdown 文档中生成精美、交互式和专业级可视化图表的能力，无需离开编辑器或依赖外部设计工具。

这套技能包包含 15 项独立技能，覆盖 7 种主流渲染引擎（Mermaid, Vega, PlantUML, Graphviz, Canvas, HTML/CSS），从简单的流程图到复杂的企业架构图、数据仪表板和云拓扑图，一应俱全。

核心亮点

1. 丰富的可视化生态

• 流程图与逻辑图：使用 Mermaid 快速绘制流程、序列图、状态机和甘特图。
• 数据可视化：通过 Vega/Vega-Lite 生成出版级的条形图、折线图、热力图和雷达图。
• 专业架构图：利用 PlantUML 结合 mxgraph 图标库，绘制 AWS/Azure/GCP 云架构、网络拓扑、安全模型和 ArchiMate 企业架构。
• 信息图与卡片：通过自定义 HTML/CSS 技能，生成杂志级排版的 KPI 卡片、时间线和知识摘要，直接嵌入 Markdown。
• 思维导图与依赖图：使用 Canvas 和 Graphviz 构建概念图谱和复杂的模块依赖关系。

2. 专为 AI 代理优化

• 标准化 SKILL.md 格式：每个技能都包含清晰的 YAML 元数据、关键语法规则、常用模板和常见陷阱指南，帮助 AI 准确生成代码，减少渲染错误。
• 智能代码围栏：明确指定每种图表所需的代码围栏（如 mermaid```, plantuml“`, vega-lite），确保编辑器能正确识别并渲染。
• 上下文感知：AI 可根据用户需求自动选择最合适的图表类型和渲染引擎（例如：简单流程用 Mermaid，复杂云架构用 PlantUML）。

3. 企业级应用场景

• 系统架构设计：分层架构图、微服务拓扑、数据管道（ETL/ELT）。
• 业务流程建模：BPMN 工作流、价值流映射、集成模式（EIP）。
• 安全与合规：威胁模型、零信任架构、IAM 流程。
• 物联网与边缘计算：传感器网络、数字孪生、边缘-云协同架构。

可用技能一览

安装与使用

快速安装（推荐）

适用于 Claude Code, Cursor, Codex 等支持 npx skills 的代理：

npx skills add markdown-viewer/skills

手动安装

• Claude Code: cp -r skills/<skill-name> ~/.claude/skills/
• GitHub Copilot / VS Code: 将技能文件放入项目根目录的 .github/skills/ 文件夹中即可自动识别。
• claude.ai: 将 SKILL.md 内容粘贴到对话上下文中，或添加到知识库。

使用技巧：如何获得最佳效果？

1. 明确需求：告诉 AI 你想要展示的“关系”或“数据”。例如：“画一个 AWS 架构，包含 EC2, RDS 和 S3，并用 PlantUML 风格。”
2. 选择正确的技能：
   • 简单逻辑 → mermaid
   • 统计数据 → vega-lite
   • 云/网络/安全 → plantuml (cloud/network/security skills)
   • 精美展示 → infographic 或 infocard
3. 遵循语法规范：AI 会读取 SKILL.md 中的规则。如果渲染失败，检查是否遗漏了必要的标签或属性。
4. 迭代优化：如果初次生成的图表布局不理想，可以让 AI 调整布局算法（如 Graphviz 的 dot vs neato）或颜色主题。