AI Vibe Coding：规范化流程与 Cursor 风格 Mermaid 渲染实现

面向“快速复刻 Cursor 同款 agent/评论区图表样式”的工程化指南

调研：Vibe Coding 规范化与 Cursor 风格 Mermaid 方案

2026-02-05 14:01

AI编程vibecodingMermaidCursorAIAgentMarkdown渲染

TL;DR

本文将“vibe coding”定义为：以大模型/agent 为主导、靠高频对话与迭代快速产出代码的方法论（非特定产品名）。
复刻 Cursor 评论区/Chat 的 Mermaid 图表风格，本质是“抓到它的主题令牌→映射到 Mermaid themeVariables→必要时用 CSS 覆盖 SVG 元素”；Cursor 具体参数需本地抓取，无法在线核验。
推荐实现链路：Markdown 解析识别 mermaid 代码块 → mermaid.render 生成 SVG → DOMPurify 清洗 → 注入容器并应用明/暗主题变量。
复刻 Cursor 同款 agent 的最小闭环：规划(Plan)→工具调用(文件/终端/搜索)→diff/patch 写入→运行测试/静态检查→总结；可先参考 Continue/Aider/OpenHands 等开源实现。

Key Insights

Mermaid 的“好看”主要来自一致的设计令牌（颜色、字体、圆角、线宽、间距），这些可通过 themeVariables 和少量 CSS 100% 工程化沉淀。
Cursor 这类编辑器通常跟随 IDE 主题；把 Mermaid 主题变量绑定到全局 CSS 变量（或 VS Code 的 --vscode-* 变量）可自动适配不同主题。
在评论区/Chat 场景，Mermaid=用户可控 DSL→SVG；必须把它当作不可信输入处理（strict 模式、sanitize、CSP/iframe 隔离）。
“vibe coding”要可维护，需要把输出从“对话记录”变成“可验收工件”（需求/验收、任务拆分、测试、变更记录、回滚策略）。

Playbook

抓取 Cursor 风格：在 Cursor（Electron）里打开 Developer Tools，找到 Mermaid 容器与最终 SVG；记录 computed style（font-family、font-size、fill/stroke、rx/ry 圆角、marker-end 箭头、边距/行距）。
接入渲染链：选 remark+rehype 或 markdown-it；遇到 mermaid 代码块时生成唯一 id，调用 mermaid.render(id, code) 得到 SVG 字符串，并把结果缓存（hash(code+theme)→svg）。
主题落地：mermaid.initialize({ theme:'base', themeVariables:{...} })；将 themeVariables 的值写成 CSS 变量引用（例如 lineColor:'var(--mmd-line)'），并用额外 CSS 覆盖 .node rect、.edgePath path、.label 等以贴近 Cursor 观感。
安全与稳定：securityLevel:'strict'；注入前用 DOMPurify 的 SVG profile 清洗；必要时放进 sandbox iframe（srcdoc）隔离样式与脚本；对大图做懒渲染（IntersectionObserver）。


import mermaid from 'mermaid';
import DOMPurify from 'dompurify';

mermaid.initialize({
  startOnLoad: false,
  securityLevel: 'strict',
  theme: 'base',
  themeVariables: {
    fontFamily: 'var(--app-font, ui-sans-serif)',
    fontSize: '12px',
    primaryColor: 'var(--mmd-node-bg)',
    primaryTextColor: 'var(--mmd-text)',
    primaryBorderColor: 'var(--mmd-border)',
    lineColor: 'var(--mmd-line)'
  }
});

export async function renderMermaid(code, el) {
  const id = `mmd-${crypto.randomUUID()}`;
  const { svg } = await mermaid.render(id, code);
  el.innerHTML = DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } });
}

Diagrams

Options · 速度 vs 可控性的决策图（基于 Options 文本自动定位）

Playbook · 执行步骤时间线（基于 Playbook 文本自动提取）

Options

方案 A：前端实时 Mermaid（mermaid-js）渲染，适合聊天/评论区即时展示；关键投入在主题体系、sanitize、性能优化。
方案 B：后端或 CI 用 mermaid-cli 预渲染（SVG/PNG），前端只展示；适合内容平台/静态文档，但主题切换需要多产物或运行时改色。
方案 C：直接复用成熟链路：MDX/Markdown 渲染器 + Mermaid 插件（或自写 code fence 处理器）；如果你同时做“Cursor 同款 agent”，可先基于 Continue/Aider/OpenHands 做二次开发。
歧义分支：若“Vibe Coding”指某个具体工具/课程/社群名称（而非方法论），则建议先做资料盘点与对标（功能、工作流、模板、提示词库），再决定是否做工程复刻。

Expert Views

前端/可视化工程师（paraphrase）：先把“设计令牌表”建立起来（颜色、字体、圆角、线宽、阴影、间距），再用 Mermaid theming 去实现；这样比复制一堆 CSS 更可维护。
AI Agent 工程师（paraphrase）：Cursor 体验的核心在“可控编辑动作”（小步提交、diff/patch、自动跑测试、失败重试）；UI 复刻可以后置，先把工具层和验证回路打通。
安全工程师（paraphrase）：Mermaid/SVG 属于高风险渲染面；要默认不信任输入，做 sanitize、禁用 HTML labels 或限制其能力，并配合 CSP/iframe 降低 XSS 影响面。
产品/工程教练（paraphrase）：vibe coding 不是不要规范，而是把规范做轻；用 1 页验收标准 + 每轮“计划-执行-验证-复盘”节奏，既保留速度又能持续迭代。

Evidence & Confidence

“Mermaid 风格=themeVariables+CSS 可控”这一点：置信度 high；Mermaid 官方支持主题与变量配置，且输出为 SVG，天然可被 CSS 微调。
“能 1:1 复刻 Cursor Mermaid 观感”：置信度 medium；抓取方法明确，但 Cursor 内部实现/版本、字体与主题令牌可能随更新变化，当前也无法在线核验目标样式细节。
“评论区/Chat 必须做 strict+sanitize”：置信度 high；用户输入到 SVG/HTML 的注入风险是成熟领域问题，DOMPurify 等方案验证广泛。
“6 小时可搭出 Cursor 类 agent MVP”：置信度 medium；框架/工具齐全，但要达到稳定可用仍需上下文管理、错误恢复、评测与工程细节打磨。

Next Steps

你先确认：目标复刻的是 Cursor Chat 里的 Mermaid 视觉，还是某条小红书笔记评论区的 Mermaid 视觉；以及你的运行环境（Web/React/Next.js/Electron/VS Code 扩展）。
做一次样式取样：截取 3–5 张你觉得“好看”的 Cursor Mermaid 图，导出最终 SVG 与 CSS；整理成“令牌表”（颜色/字体/线宽/圆角/间距）。
做 POC：实现 Markdown 里 mermaid → SVG 的渲染与 sanitize，并加入明/暗主题切换；用回归截图对比（同一份 mermaid 输入在不同主题下的输出）。
agent 侧并行推进：列出必备工具与权限边界（文件、终端、网络、git），用 LangGraph/AutoGen 组装“计划→执行→验证”闭环，并强制每轮产出可运行测试或可复现实验步骤。

Details (Optional)

Details

TL;DR

本文将“vibe coding”定义为：以大模型/agent 为主导、靠高频对话与迭代快速产出代码的方法论（非特定产品名）。
复刻 Cursor 评论区/Chat 的 Mermaid 图表风格，本质是“抓到它的主题令牌→映射到 Mermaid themeVariables→必要时用 CSS 覆盖 SVG 元素”；Cursor 具体参数需本地抓取，无法在线核验。
推荐实现链路：Markdown 解析识别 mermaid 代码块 → mermaid.render 生成 SVG → DOMPurify 清洗 → 注入容器并应用明/暗主题变量。
复刻 Cursor 同款 agent 的最小闭环：规划(Plan)→工具调用(文件/终端/搜索)→diff/patch 写入→运行测试/静态检查→总结；可先参考 Continue/Aider/OpenHands 等开源实现。

Key Insights

Mermaid 的“好看”主要来自一致的设计令牌（颜色、字体、圆角、线宽、间距），这些可通过 themeVariables 和少量 CSS 100% 工程化沉淀。
Cursor 这类编辑器通常跟随 IDE 主题；把 Mermaid 主题变量绑定到全局 CSS 变量（或 VS Code 的 --vscode-* 变量）可自动适配不同主题。
在评论区/Chat 场景，Mermaid=用户可控 DSL→SVG；必须把它当作不可信输入处理（strict 模式、sanitize、CSP/iframe 隔离）。
“vibe coding”要可维护，需要把输出从“对话记录”变成“可验收工件”（需求/验收、任务拆分、测试、变更记录、回滚策略）。

Playbook

抓取 Cursor 风格：在 Cursor（Electron）里打开 Developer Tools，找到 Mermaid 容器与最终 SVG；记录 computed style（font-family、font-size、fill/stroke、rx/ry 圆角、marker-end 箭头、边距/行距）。
接入渲染链：选 remark+rehype 或 markdown-it；遇到 mermaid 代码块时生成唯一 id，调用 mermaid.render(id, code) 得到 SVG 字符串，并把结果缓存（hash(code+theme)→svg）。
主题落地：mermaid.initialize({ theme:'base', themeVariables:{...} })；将 themeVariables 的值写成 CSS 变量引用（例如 lineColor:'var(--mmd-line)'），并用额外 CSS 覆盖 .node rect、.edgePath path、.label 等以贴近 Cursor 观感。
安全与稳定：securityLevel:'strict'；注入前用 DOMPurify 的 SVG profile 清洗；必要时放进 sandbox iframe（srcdoc）隔离样式与脚本；对大图做懒渲染（IntersectionObserver）。


import mermaid from 'mermaid';
import DOMPurify from 'dompurify';

mermaid.initialize({
  startOnLoad: false,
  securityLevel: 'strict',
  theme: 'base',
  themeVariables: {
    fontFamily: 'var(--app-font, ui-sans-serif)',
    fontSize: '12px',
    primaryColor: 'var(--mmd-node-bg)',
    primaryTextColor: 'var(--mmd-text)',
    primaryBorderColor: 'var(--mmd-border)',
    lineColor: 'var(--mmd-line)'
  }
});

export async function renderMermaid(code, el) {
  const id = `mmd-${crypto.randomUUID()}`;
  const { svg } = await mermaid.render(id, code);
  el.innerHTML = DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } });
}

Expert Views

前端/可视化工程师（paraphrase）：先把“设计令牌表”建立起来（颜色、字体、圆角、线宽、阴影、间距），再用 Mermaid theming 去实现；这样比复制一堆 CSS 更可维护。
AI Agent 工程师（paraphrase）：Cursor 体验的核心在“可控编辑动作”（小步提交、diff/patch、自动跑测试、失败重试）；UI 复刻可以后置，先把工具层和验证回路打通。
安全工程师（paraphrase）：Mermaid/SVG 属于高风险渲染面；要默认不信任输入，做 sanitize、禁用 HTML labels 或限制其能力，并配合 CSP/iframe 降低 XSS 影响面。
产品/工程教练（paraphrase）：vibe coding 不是不要规范，而是把规范做轻；用 1 页验收标准 + 每轮“计划-执行-验证-复盘”节奏，既保留速度又能持续迭代。

Options

方案 A：前端实时 Mermaid（mermaid-js）渲染，适合聊天/评论区即时展示；关键投入在主题体系、sanitize、性能优化。
方案 B：后端或 CI 用 mermaid-cli 预渲染（SVG/PNG），前端只展示；适合内容平台/静态文档，但主题切换需要多产物或运行时改色。
方案 C：直接复用成熟链路：MDX/Markdown 渲染器 + Mermaid 插件（或自写 code fence 处理器）；如果你同时做“Cursor 同款 agent”，可先基于 Continue/Aider/OpenHands 做二次开发。
歧义分支：若“Vibe Coding”指某个具体工具/课程/社群名称（而非方法论），则建议先做资料盘点与对标（功能、工作流、模板、提示词库），再决定是否做工程复刻。

Evidence & Confidence

“Mermaid 风格=themeVariables+CSS 可控”这一点：置信度 high；Mermaid 官方支持主题与变量配置，且输出为 SVG，天然可被 CSS 微调。
“能 1:1 复刻 Cursor Mermaid 观感”：置信度 medium；抓取方法明确，但 Cursor 内部实现/版本、字体与主题令牌可能随更新变化，当前也无法在线核验目标样式细节。
“评论区/Chat 必须做 strict+sanitize”：置信度 high；用户输入到 SVG/HTML 的注入风险是成熟领域问题，DOMPurify 等方案验证广泛。
“6 小时可搭出 Cursor 类 agent MVP”：置信度 medium；框架/工具齐全，但要达到稳定可用仍需上下文管理、错误恢复、评测与工程细节打磨。

Next Steps

你先确认：目标复刻的是 Cursor Chat 里的 Mermaid 视觉，还是某条小红书笔记评论区的 Mermaid 视觉；以及你的运行环境（Web/React/Next.js/Electron/VS Code 扩展）。
做一次样式取样：截取 3–5 张你觉得“好看”的 Cursor Mermaid 图，导出最终 SVG 与 CSS；整理成“令牌表”（颜色/字体/线宽/圆角/间距）。
做 POC：实现 Markdown 里 mermaid → SVG 的渲染与 sanitize，并加入明/暗主题切换；用回归截图对比（同一份 mermaid 输入在不同主题下的输出）。
agent 侧并行推进：列出必备工具与权限边界（文件、终端、网络、git），用 LangGraph/AutoGen 组装“计划→执行→验证”闭环，并强制每轮产出可运行测试或可复现实验步骤。

Sources

Mermaid：文档 https://mermaid.js.org/ ；Repo https://github.com/mermaid-js/mermaid ；CLI https://github.com/mermaid-js/mermaid-cli （均无法在线核验）
Markdown 渲染基础设施：remark https://github.com/remarkjs/remark ；rehype https://github.com/rehypejs/rehype ；markdown-it https://github.com/markdown-it/markdown-it （均无法在线核验）
SVG/XSS 清洗：DOMPurify https://github.com/cure53/DOMPurify （无法在线核验）
Agent/工作流参考：Continue https://github.com/continuedev/continue ；Aider https://github.com/paul-gauthier/aider ；OpenHands https://github.com/All-Hands-AI/OpenHands ；SWE-agent https://github.com/princeton-nlp/SWE-agent ；AutoGen https://github.com/microsoft/autogen ；LangGraph https://github.com/langchain-ai/langgraph ；LiteLLM https://github.com/BerriAI/litellm ；用户提供文章 https://mp.weixin.qq.com/s/p6F-wJ7i1INMjza361ZSSg ；用户提供链接 http://xhslink.com/o/23R2gZlGwZQ （均无法在线核验）

Sources

Mermaid：文档 https://mermaid.js.org/ ；Repo https://github.com/mermaid-js/mermaid ；CLI https://github.com/mermaid-js/mermaid-cli （均无法在线核验）
Markdown 渲染基础设施：remark https://github.com/remarkjs/remark ；rehype https://github.com/rehypejs/rehype ；markdown-it https://github.com/markdown-it/markdown-it （均无法在线核验）
SVG/XSS 清洗：DOMPurify https://github.com/cure53/DOMPurify （无法在线核验）
Agent/工作流参考：Continue https://github.com/continuedev/continue ；Aider https://github.com/paul-gauthier/aider ；OpenHands https://github.com/All-Hands-AI/OpenHands ；SWE-agent https://github.com/princeton-nlp/SWE-agent ；AutoGen https://github.com/microsoft/autogen ；LangGraph https://github.com/langchain-ai/langgraph ；LiteLLM https://github.com/BerriAI/litellm ；用户提供文章 https://mp.weixin.qq.com/s/p6F-wJ7i1INMjza361ZSSg ；用户提供链接 http://xhslink.com/o/23R2gZlGwZQ （均无法在线核验）

Closing Summary

结论：调研：Vibe Coding 规范化与 Cursor 风格 Mermaid 方案
下一步：先确认目标场景与运行环境，再做样式抓取与 Mermaid 渲染 POC

One next action

先确认目标场景与运行环境，再做样式抓取与 Mermaid 渲染 POC

AI Vibe Coding：规范化流程与 Cursor 风格 Mermaid 渲染实现

TL;DR

Key Insights

Playbook

Diagrams

Options

Expert Views

Evidence & Confidence

Next Steps

Details (Optional)

TL;DR

Key Insights

Playbook

Expert Views

Options

Evidence & Confidence

Next Steps

Sources

Related

Sources

Closing Summary