design-doc-mermaid:根据文本或代码生成 Mermaid 图表 是做什么的?
根据文本描述或源代码创建 Mermaid 图表(活动图、部署图、时序图、架构图)。当用户要求“创建图表”、“生成 mermaid”、“记录架构”、“代码转图表”、“创建设计文档”或“将代码转换为图表”时使用。支持按需分层加载指南、Unicode 语义符号以及用于图表提取和图像转换的 Python 工具。
根据文本描述或源代码创建 Mermaid 图表(活动图、部署图、时序图、架构图)。当用户要求“创建图表”、“生成 mermaid”、“记录架构”、“代码转图表”、“创建设计文档”或“将代码转换为图表”时使用。支持按需分层加载指南、Unicode 语义符号以及用于图表提取和图像转换的 Python 工具。
该技能的核心功能是依据自然语言描述或源代码,自动生成多种类型的 Mermaid 图表(包括活动图、部署图、时序图和架构图)。它非常适合在开发流程中快速可视化业务逻辑、系统架构或部署结构,提升文档质量和团队沟通效率。用户只需提出类似“创建图表”、“生成 mermaid”、“记录架构”或“将代码转换为图表”等需求即可触发。技能内部实现了按需分层加载指南,确保在不同复杂度场景下都能高效工作。同时,它支持 Unicode 语义符号,使图表元素更直观易懂。此外,还提供 Python 工具用于从现有文档中提取图表代码或将其转换为图像格式,方便集成到自动化流水线中。该技能可运行于支持 Mermaid 的 AI 助手平台,如 Claude Code、Cursor 或 Codex,并兼容常见的设计文档生成工作流。
npx skills add https://github.com/spillwavesolutions/design-doc-mermaid/tree/main/skills/design-doc-mermaidInstalled? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
根据文本描述或源代码创建 Mermaid 图表(活动图、部署图、时序图、架构图)。当用户要求“创建图表”、“生成 mermaid”、“记录架构”、“代码转图表”、“创建设计文档”或“将代码转换为图表”时使用。支持按需分层加载指南、Unicode 语义符号以及用于图表提取和图像转换的 Python 工具。
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.