图表可视化
未发现用户侧风险
图表绘制器
根据 JSON 规范渲染清晰的蓝图风格 SVG 图表。当用户要求绘制请求流、神经网络、Transformer 模块、系统架构、状态机、数据管道或任何节点和边的技术图示,并希望输出为 SVG 用于文档、README、帖子或幻灯片时使用。
文件预览
1 个文件
SKILL.md
2.0 KB · 可预览
---
name: diagrammer
description: Render clean blueprint-style SVG diagrams from JSON specs. Use when users ask to draw, sketch, or diagram a request flow, neural net, transformer block, system architecture, state machine, data pipeline, or any node-and-edge technical visual they want as an SVG for docs, READMEs, posts, or slides.
---
# diagrammer
Use `diagrammer` to turn a small JSON spec into a clean SVG diagram. It is useful when the user wants a precise technical diagram without opening a design tool.
## Install
The renderer must be installed locally:
```bash
pipx install diagrammer
```
## Workflow
1. Convert the user's plain-English diagram request into a JSON spec.
2. Save the spec to a temporary or project file.
3. Render it:
```bash
diagrammer path/to/spec.json > path/to/diagram.svg
```
4. Return the SVG path to the user.
## Spec Essentials
```json
{
"nodes": [
{"id": "client", "type": "box", "label": "client"},
{"id": "api", "type": "box", "label": "api"},
{"id": "db", "type": "database", "label": "postgres"}
],
"edges": [
{"from": "client", "to": "api", "label": "request"},
{"from": "api", "to": "db", "label": "query"}
]
}
```
Built-in node types: `box`, `circle`, `text`, `database`, `stack`, `group`, `note`, and `custom`.
Useful optional fields:
- `direction`: `"LR"` or `"TB"`
- `router`: `"straight"` or `"ortho"`
- `label` on edges
- `style`: `"solid"` or `"dashed"`
- `weight`: `"thin"` or `"thick"`
For the full reference, run:
```bash
diagrammer prompt
```
## When To Choose This
Use `diagrammer` when the output should be a checked-in SVG artifact, especially for:
- README diagrams
- architecture sketches
- request flows
- state machines
- neural-net or transformer diagrams
- simple data pipelines
Prefer Mermaid when the user specifically asks for Mermaid syntax or wants diagrams rendered by a Markdown platform. Prefer Excalidraw when the user wants editable hand-drawn canvas files.
SKILL.md
元数据
| name | 图表绘制器 |
|---|---|
| description | 根据 JSON 规范渲染清晰的蓝图风格 SVG 图表。当用户要求绘制请求流、神经网络、Transformer 模块、系统架构、状态机、数据管道或任何节点和边的技术图示,并希望输出为 SVG 用于文档、README、帖子或幻灯片时使用。 |
图表绘制器
使用 diagrammer 将小型 JSON 规范转换为干净的 SVG 图表。当用户想要精确的技术图表而不使用设计工具时,这很有用。
安装
必须本地安装渲染器:
bash
pipx install diagrammer工作流程
- 将用户的口语化图表请求转换为 JSON 规范。
- 将规范保存到临时或项目文件。
- 渲染它:
bash
diagrammer path/to/spec.json > path/to/diagram.svg- 返回 SVG 路径给用户。
规范要点
json
{
"nodes": [
{"id": "client", "type": "box", "label": "client"},
{"id": "api", "type": "box", "label": "api"},
{"id": "db", "type": "database", "label": "postgres"}
],
"edges": [
{"from": "client", "to": "api", "label": "request"},
{"from": "api", "to": "db", "label": "query"}
]
}内置节点类型:box、circle、text、database、stack、group、note 和 custom。
有用的可选字段:
direction:"LR"或"TB"router:"straight"或"ortho"- 边上的
label style:"solid"或"dashed"weight:"thin"或"thick"
完整参考文档,运行:
bash
diagrammer prompt何时选择此项
当输出应为可检入的 SVG 文件时,使用 diagrammer,尤其适用于:
- README 图表
- 架构示意图
- 请求流
- 状态机
- 神经网络或 Transformer 图表
- 简单的数据管道
当用户明确要求 Mermaid 语法或希望由 Markdown 平台渲染图表时,优先选择 Mermaid。当用户想要可编辑的手绘风格画布文件时,优先选择 Excalidraw。