360 Secure SkillHub
360 安全技能中心

diagram-maker

根据一句话描述生成专业图表,覆盖软件架构图、流程图、概念图和白板草图三种输出模式,产出内嵌 SVG 的单 HTML 文件或可编辑的 Excalidraw JSON;Skill 声明零运行时依赖、无 API 费用,并附带 SVG 模板与 Excalidraw 样式参考文件。

lantianbaicai
lantianbaicai
热度 10.83
最近更新 2026-09-16 05:12:50
分类:创作依赖:内部调用大模型应用场景:图像生成 / 概念解释

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add diagram-maker
Metadata
name
diagram-maker
description
📐 一句话生成专业图表 — 架构图/流程图/概念图/白板草图,支持SVG和Excalidraw。Diagrams from natural language: architecture, flow, concepts.
metadata
{"openclaw":{"emoji":"📐"}}

📐 Diagram Maker — 一句话生成专业图表

「画一个微服务架构图」→ 你的 AI 助手直接给你一张可用的图。不需要 Visio,不需要 draw.io。

为什么你需要这个技能?

  • 🏗️ 架构师/开发者:系统架构图、微服务拓扑、数据库ER图
  • 📊 产品经理:业务流程图、用户旅程图、泳道图
  • 🎓 教学/演示:概念图、知识图谱、时序图
  • 🎨 创作者:信息图、白板草图、思维导图

快速上手

软件架构图(专业风格)

画一个包含前端、API网关、3个微服务、Redis缓存、PostgreSQL数据库的架构图

流程图(手绘风格 Excalidraw)

画一个用户注册流程图,包含验证邮箱、设置密码、发送欢迎邮件

概念图(干净 SVG)

画一个解释「机器学习训练流程」的概念图:数据→特征工程→模型训练→评估→部署

三种输出模式

模式 适用场景 风格
🏗️ architecture-svg 软件架构/云基础设施 专业技术图表
📐 clean-svg 概念/流程/教育 简洁清晰
✏️ excalidraw 白板/草图/协作 手绘风格,可编辑

示例输出

输入:「画一个电商系统的微服务架构」 输出:一张包含 Nginx→API Gateway→订单/商品/用户服务→MySQL/Redis/ES 的专业 SVG 架构图,带箭头、图例、颜色分区。

设计原则

  • ✅ 要素5-9个最佳,不堆砌
  • ✅ 语义化配色(中性/输入/处理/存储/外部/风险)
  • ✅ 箭头在盒子后面,视觉干净
  • ✅ 嵌入式 SVG,单 HTML 文件,无外部依赖

技术栈

  • 纯 SVG/HTML 输出,浏览器直接打开
  • Excalidraw JSON 格式,可导入 excalidraw.com 继续编辑
  • 零运行时依赖,零 API 费用

📦 无需安装额外依赖,输出为标准 HTML/JSON 文件。