大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



个人在深度使用 Markdown Viewer Agent Skills 一段时间后，发现它不只是一个“绘图插件”，而是一套完整的 AI 制图行为规范。关键判断：

• 核心定义：一套让 AI Coding Agent（如 Claude Code, Cline）拥有专业制图能力的“技能插件库”。
• 技术亮点：集成 9500+ 图标，支持 PlantUML、Vega-Lite、HTML/CSS 嵌入等 5 大渲染引擎。
• 个人评价：彻底解决了 AI 画图“丑、简、乱”的痛点，是目前我心目中 S 级的 Agent 扩展方案。
• 开源地址：markdown-viewer/skills

在我的个人开发实战中，让 AI 画一张架构图或者时序图，往往是一个“开盲盒”的过程。

个人感觉，虽然现在的模型（如 Claude 3.5 Sonnet）逻辑很强，但它们对“视觉美感”和“特定 DSL（领域特定语言）”的掌握其实非常不稳定。你经常会遇到：

• 语法错误导致图片渲染不出来。
• 样式极其简陋，甚至像 20 年前的流程图。
• 逻辑混乱，箭头乱飞。

这就是为什么我们需要一套标准化的 Agent Skills。

这套项目的核心逻辑是将“怎么画”这种复杂的视觉任务，封装成一系列微小的、可插拔的 SKILL.md 模块。

它采用了“YAML Frontmatter + 指令说明”的标准格式，让 Agent 能够像加载插件一样加载这些能力。

这种做法带来的好处显而易见：模型不再是凭空猜测怎么画图，而是有了一套严格的“操作手册”。

在这个开源项目中，我数了一下大概有 14 个核心 Skills。个人实战中用得最顺手的还是以下几个：

1. UML & 架构设计（P0 级核心）

这是该项目的“看家本领”。它不仅支持 14 种标准的 UML 图（类图、时序图、用例图等），最牛的地方在于它集成了 9500+ 个 mxgraph 图标库。

这意味着什么？

当你在画一个 K8s 部署图或者 AWS 架构图时，你不再需要手动去找图标。

在 uml/SKILL.md 中，项目定义了极其详尽的图标引入规则。例如，如果你想画一个标准的 S3 存储桶，你只需要让 Agent 知道正确的引用路径。

个人感觉这个 Skill 的核心竞争力在于它对 PlantUML 的深度调优。它不仅教 AI 怎么写代码，还教 AI 怎么利用内置的样式库去提升美感。比如，它会自动应用 !theme 或者是自定义的颜色变量，避免了那种默认的“黄底黑线”的土味风格。

2. HTML/CSS 嵌入式渲染（制图美学的天花板）

这是最让我感到惊艳的部分，也是该项目与普通的“Markdown 绘图”拉开差距的地方。

在 architecture 和 infocard 这两个 Skill 中，项目竟然直接利用 HTML 和 TailwindCSS（或者原生 CSS）来实现杂志级的排版。

为了实现这种效果，项目在 architecture/SKILL.md 中制定了所谓的“反 AI 品味”规则：

• 拒绝完美对称：Agent 默认喜欢把所有东西居中对齐，这在视觉上非常呆板。
• 强制色彩层级：必须使用项目定义的 CSS 变量（如 --text-primary, --bg-accent），而不是随意使用颜色。

这种“反直觉”的指令，反而让 AI 生成的架构图看起来非常有设计感，而不是那种呆板的工业产品说明书。

我在实际测试中发现，用这个 Skill 生成的“技术介绍卡片”，发到朋友圈甚至会被人问是用哪个设计软件做的。

3. 数据驱动与空间思维：Vega-Lite 与 JSON Canvas

除了画图，项目还集成了 Vega-Lite 数据可视化和 JSON Canvas 空间思维导图。

这意味着你可以直接把一段 JSON 数据丢给 Agent，让它生成精美的统计图表。在我的实战中，这种“数据即视图”的转换效率极高，特别是在做技术报告时。

更让我惊喜的是对 JSON Canvas 的支持。这种无限画布的概念非常适合用来梳理复杂的业务流程。

我们来看一下 uml/SKILL.md 里的核心逻辑，这可能是我见过写得最严谨的 Prompt 之一。

1. 规避语法错误的“铁律”

在源码位置：uml/SKILL.md，它定义了一系列 Critical Rules。

这些规则并不是泛泛而谈，而是针对模型最容易犯错的地方进行了精准打击：

 Critical Rules (代码层面的约束) - ALWAYS use `!include` for standard icons to ensure external rendering. - DO NOT use unconfirmed syntax like `rectangle <..>` which causes parser error. - ENSURE all relationship arrows (e.g., `-->`) are correctly oriented. 

个人感觉，这些规则虽然简单，但它是模型在生成代码时的“安全绳”。它通过显式地禁止（DO NOT）某些容易出错的语法，极大地降低了渲染失败的概率。在我的实战中，自从加载了这个 Skill，画图报错的概率从 30% 降到了几乎为 0。

2. 深度下钻：自动色调感应逻辑

在 infocard/SKILL.md 中，有一个非常有趣的逻辑叫做 Tone Sensing。

源码位置：infocard/SKILL.md。

它引导模型根据内容的主题（比如是“安全警示”还是“技术分享”）自动选择不同的背景色和文字色。

这种将“设计思维”编码进指令的做法，是该项目能够产出高水准视觉内容的根源。它甚至考虑到了“色彩心理学”，让 Agent 在画图时能感知到用户的情绪。

3. architecture 的非对称美学

在 architecture/SKILL.md 的源码位置：architecture/SKILL.md，有一段专门关于布局的指令：

“Avoid global centering. Use 1/3 and 2/3 column splits for a professional magazine feel.”

这段话直接改变了模型的默认行为。在我的一个实战案例中，我让它画一个“微服务治理架构”，它自动将核心网格放在了左侧，而将监控、链路追踪等侧向逻辑放在了右侧较窄的一栏。这种“呼吸感”是普通绘图工具很难自动生成的。

在使用这套 Skills 的过程中，我总结了一套“保命秘籍”。

1. 为什么 HTML 嵌入不能加代码块？（致命的 Rule 1）

这是项目中的 Rule 1。很多人（包括我）一开始习惯性地给生成的 HTML 代码加上 html标签。

故障现象：渲染窗口直接显示了一堆源码，没有任何图形。
根因剖析：Markdown Viewer 的插件逻辑是直接识别 HTML 标签进行实时渲染。如果你套了代码块，引擎会将其视为“需要展示给用户看的代码文本”，从而跳过了渲染步骤。
解决方案：直接输出

，不要套任何三反引号。

2. 严禁标签间空行

故障现象：生成的卡片中间莫名其妙断开了，下半部分的样式全丢。
根因剖析：Markdown 渲染器在遇到空行时，会认为当前的 HTML 块已经结束，转而开始解析下一段 Markdown。这会导致 CSS 作用域失效。
解决方案：保持 HTML 代码的连续性，宁可这一行写得很长，也不要加空行。

3. 图标库引用路径的“幻觉”

有时候 Agent 会尝试自己发明一些图标路径，比如 <$kubernetes/pod>。

故障现象：图片中间出现一个红色的红叉，提示找不到资源。
根因剖析：mxgraph 库的图标路径有严格的命名空间要求。
解决方案：在提问时明确提示“请参考 uml/SKILL.md 中定义的标准图标路径”。

作为一个长期关注 AI Agent 领域的人，我必须聊聊这个项目的 SKILL.md 文档写作质量。

首先，这个项目的文档组织非常严谨，展现出一种“近乎偏执”的逻辑规律。

它并没有采用传统的那种“我是谁、我要做什么”的散文式 Prompt，而是采用了一种“结构化指令集”的模式。每个 Skill 都包含了身份定义（Name/Description）、核心逻辑（Instruction）、负面约束（Anti-AI Checklist）以及丰富的示例库（Examples）。

这种组织方式的好处是，模型在解析时能够快速定位到具体的约束条件，而不是在长篇大论中迷失。

在规避 AI 幻觉方面，该文档的表现堪称标杆。

它大量使用了“证据驱动”的写作方式。比如在描述某个图标怎么用时，它不仅给出了指令，还附带了该图标在 mxgraph 库中的准确 ID。

这种对细节的极致追求，让模型在“瞎编语法”和“引用规范”之间，被强行拉向了后者。

深度剖析其背后的 Prompt Skills 运用逻辑，你会发现它采用了“任务正交分解”的策略。

每个 Skill 只负责一个极小的垂直领域（比如专门画 UML，或者专门做 HTML 卡片），这种设计让多个 Skill 可以并行运行而互不干扰。

同时，它引入了“双入口设计”：

• 明确指令入口：当用户明确说“画一张时序图”时，直接触发。
• 模糊诊断入口：当用户表达出“这里逻辑有点乱”这种模糊需求时，Agent 会主动建议“是否需要我画图梳理”。

这种设计极大地提升了“开发者友好度”。它不像是一个冷冰冰的工具，而更像是一个懂你心意的资深架构师伙伴。

相比于我之前看过的很多开源 Skill，这个项目的写作风格非常“落地”。它抛弃了宏大的技术叙事，转而关注“箭头怎么指”、“颜色怎么配”这种微观实操。

与同类 Skill 对比：

定位判断：

• 本 Skill 属于：S 级
• 最适合场景：需要高频生成专业技术文档、架构设计图、或是对视觉呈现有极致追求的开发者。
• 不适合场景：极其简单的逻辑记录，或是对画质完全不在意的临时草稿。

在我的实战过程中，也踩了一些坑，这里分享给大家：

1. 为什么 HTML 嵌入不能加代码块？

这是项目中的 Rule 1。很多人（包括我）一开始习惯性地给生成的 HTML 代码加上 html标签。

结果发现：渲染直接挂掉。

因为 Markdown Viewer 的逻辑是直接识别 HTML 标签进行渲染。如果你加了代码块，它就变成了纯文本展示。

个人感觉这个限制虽然反直觉，但它是为了保证渲染的流畅性，大家一定要注意。

2. 保持 HTML 的连续性

在生成 architecture 图表时，千万不要在 HTML 标签之间加空行。

一旦出现空行，Markdown 引擎可能会将其切断，导致样式错乱。

3. 图标库的加载延迟

虽然有 9500+ 图标，但在某些网络环境下，PlantUML 引用外部图标可能会有延迟。

建议在生产环境中，尽量复用已经加载过的核心图标集。

通过 Markdown Viewer Agent Skills 的深度实战，我最大的体会是：“图表即代码（Diagram as Code）”在 AI 时代已经进化到了一个新的高度。

个人感觉，以后我们可能不再需要去学怎么用复杂的绘图软件。

我们只需要学会“怎么提问”以及“怎么配置 Skill”。

这套开源项目为我们提供了一个完美的范本：只要你的指令足够严谨、你的美学约束足够清晰，AI 就能产出超越人类平均水平的专业内容。

它不仅是一个工具，更是对 AI 时代“专业化表达”的一次成功探索。

• markdown-viewer/skills 开源项目地址
• Markdown Viewer 官方文档
• PlantUML 官方语法指南
• Vega-Lite 数据可视化规范
• 4亿token买来5个教训：让6个AI Agent连写4天代码发生了什么？