eraser-diagrams

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Eraser Diagram Generator

Eraser 架构图生成器

Generates professional architecture diagrams directly from code, infrastructure files, or natural language descriptions using the Eraser API.

通过 Eraser API 直接从代码、基础设施文件或自然语言描述生成专业的架构图。

When to Use

使用场景

Activate this skill when:

User asks to create, generate, or visualize a diagram
User wants to document architecture from code
User has Terraform, AWS, Azure, or infrastructure files
User describes a system and wants it visualized
User mentions "diagram", "architecture", "visualize", or "draw"

在以下场景激活此技能：

用户要求创建、生成或可视化一张图
用户希望从代码中记录架构
用户拥有 Terraform、AWS、Azure 或基础设施文件
用户描述了一个系统并希望将其可视化
用户提到“图”、“架构”、“可视化”或“绘制”

How It Works

工作原理

Analyze the source: Extract architecture information from code, files, or descriptions
Generate Eraser DSL: Create Eraser DSL code that describes the diagram
Call the Eraser API: Make an HTTP POST request to render the diagram
Return the result: Present the image URL and editor link to the user

分析源数据：从代码、文件或描述中提取架构信息
生成 Eraser DSL：创建描述该图的 Eraser DSL 代码
调用 Eraser API：发送 HTTP POST 请求以渲染图
返回结果：向用户展示图片 URL 和编辑器链接

Diagram Types and Syntax

图类型与语法

Eraser supports five types of diagrams, each optimized for different use cases. For detailed DSL syntax and examples, refer to the appropriate reference file:

Eraser 支持五种类型的图，每种图都针对不同的使用场景进行了优化。有关详细的 DSL 语法和示例，请参考相应的参考文件：

Flow Charts

流程图

Visualize process flows, user flows, and logic flows represented as nodes, groups, and relationships. Diagrams are created using simple syntax.

Use for: Process flows, user journeys, decision trees, business process documentation

diagramType:

"flowchart-diagram"

Reference: Flowchart Syntax

将流程、用户流和逻辑流可视化为节点、组和关系。使用简单语法创建图。

适用场景：流程流、用户旅程、决策树、业务流程文档

diagramType：

"flowchart-diagram"

参考：流程图语法

Entity Relationship Diagrams (ERD)

实体关系图（ERD）

Visualize data models represented as entities, attributes, and relationships. Diagrams are created using simple syntax.

Use for: Database schema design, data modeling, understanding entity relationships, documenting data structures

diagramType:

"entity-relationship-diagram"

Reference: ERD Syntax

将数据模型可视化为实体、属性和关系。使用简单语法创建图。

适用场景：数据库架构设计、数据建模、理解实体关系、记录数据结构

diagramType：

"entity-relationship-diagram"

参考：ERD 语法

Cloud Architecture Diagrams

云架构图

Visualize cloud infrastructure represented as nodes, groups, and connections. Diagrams are created using simple syntax.

Use for: Cloud infrastructure visualization, AWS/Azure/GCP architectures, system architecture documentation, data flow visualization

diagramType:

"cloud-architecture-diagram"

Reference: Architecture Syntax

将云基础设施可视化为节点、组和连接。使用简单语法创建图。

适用场景：云基础设施可视化、AWS/Azure/GCP 架构、系统架构文档、数据流可视化

diagramType：

"cloud-architecture-diagram"

参考：架构语法

Sequence Diagrams

序列图

Visualize system flows using sequence diagrams. Each vertical column represents an entity (e.g. user, server, DB) and arrows between the columns represent the flow of information or requests. Diagrams are created using simple syntax.

Use for: API request/response flows, system interactions, user workflows, message passing between services, process flows over time

diagramType:

"sequence-diagram"

Reference: Sequence Syntax

使用序列图可视化系统流。每个垂直列代表一个实体（如用户、服务器、数据库），列之间的箭头代表信息或请求的流向。使用简单语法创建图。

适用场景：API 请求/响应流、系统交互、用户工作流、服务间消息传递、随时间变化的流程流

diagramType：

"sequence-diagram"

参考：序列图语法

BPMN Diagrams (Swimlane Diagrams)

BPMN 图（泳道图）

Visualize business processes represented as pools, lanes, and flow objects such as tasks, events, and gateways. Diagrams are created using simple syntax.

Use for: Business process documentation, workflow visualization, process improvement, cross-functional processes, swimlane diagrams showing roles/responsibilities

diagramType:

"bpmn-diagram"

Reference: BPMN Syntax

Each reference file contains complete syntax documentation, property references, and practical examples.

将业务流程可视化为池、泳道和流对象，如任务、事件和网关。使用简单语法创建图。

适用场景：业务流程文档、工作流可视化、流程改进、跨职能流程、展示角色/职责的泳道图

diagramType：

"bpmn-diagram"

参考：BPMN 语法

每个参考文件都包含完整的语法文档、属性参考和实用示例。

API Integration

API 集成

Endpoint

端点

POST https://app.eraser.io/api/render/elements
Content-Type: application/json
Authorization: Bearer ${ERASER_API_KEY}
X-Skill-Source: eraser-skill

Note: The

X-Skill-Source

header identifies the AI agent. You MUST replace

eraser-skill

with your actual agent name:

If you are Claude (Anthropic), use:
```
claude
```
If you are running in Cursor, use:
```
cursor
```
If you are ChatGPT (OpenAI), use:
```
chatgpt
```
If you are Gemini (Google), use:
```
gemini
```
Otherwise, use your model/agent name in lowercase

POST https://app.eraser.io/api/render/elements
Content-Type: application/json
Authorization: Bearer ${ERASER_API_KEY}
X-Skill-Source: eraser-skill

注意：

X-Skill-Source

标头用于标识 AI Agent。您必须将

eraser-skill

替换为您实际的 Agent 名称：

如果您是 Claude（Anthropic），请使用：
```
claude
```
如果您在 Cursor 中运行，请使用：
```
cursor
```
如果您是 ChatGPT（OpenAI），请使用：
```
chatgpt
```
如果您是 Gemini（Google），请使用：
```
gemini
```
否则，使用您的模型/Agent 名称的小写形式

Response Format

响应格式

json

{
  "imageUrl": "https://storage.googleapis.com/eraser-images/...",
  "createEraserFileUrl": "https://app.eraser.io/new?requestId=abc123&state=xyz789",
  "renderedElements": [...]
}

json

{
  "imageUrl": "https://storage.googleapis.com/eraser-images/...",
  "createEraserFileUrl": "https://app.eraser.io/new?requestId=abc123&state=xyz789",
  "renderedElements": [...]
}

Error Responses

错误响应

Status	Error	Cause	Solution
400	`Diagram element has no code`	Missing `code` field in element	Ensure element has valid DSL code
400	`Diagram element has no diagramType`	Missing `diagramType` field	Add valid diagramType to element
400	`Invalid diagramType`	Unsupported diagram type	Use one of the supported types listed above
401	`Unauthorized`	Invalid or expired API key	Check `ERASER_API_KEY` is valid
500	`Internal server error`	Server-side issue	Retry the request; if persistent, contact support

Error Response Format:

json

{
  "error": {
    "message": "Diagram element has no code",
    "status": 400
  }
}

Troubleshooting Tips:

Verify DSL syntax is correct before making the API call
Ensure
```
diagramType
```
matches the DSL content (e.g., sequence DSL with
```
sequence-diagram
```
)
For auth errors, verify the API key is set correctly as an environment variable

状态码	错误信息	原因	解决方案
400	`Diagram element has no code`	元素中缺少 `code` 字段	确保元素包含有效的 DSL 代码
400	`Diagram element has no diagramType`	缺少 `diagramType` 字段	为元素添加有效的 diagramType
400	`Invalid diagramType`	不支持的图类型	使用上面列出的支持类型之一
401	`Unauthorized`	API 密钥无效或过期	检查 `ERASER_API_KEY` 是否有效
500	`Internal server error`	服务器端问题	重试请求；如果问题持续，请联系支持人员

错误响应格式：

json

{
  "error": {
    "message": "Diagram element has no code",
    "status": 400
  }
}

故障排除提示：

在调用 API 之前验证 DSL 语法是否正确
确保
```
diagramType
```
与 DSL 内容匹配（例如，序列图 DSL 对应
```
sequence-diagram
```
）
对于认证错误，验证 API 密钥是否正确设置为环境变量

Instructions

使用说明

When the user requests a diagram:

Extract Information
- If code/files are provided, analyze the structure, resources, and relationships
- If description is provided, identify key components and connections
- Determine the appropriate diagram type
Generate Eraser DSL
- Create Eraser DSL code that represents the architecture
- CRITICAL: Label Formatting Rules
  - Labels MUST be on a single line - NEVER use newlines inside label attributes
  - Keep labels simple and readable - prefer separate labels over concatenating too much metadata
  - Format DSL with proper line breaks (one node/group per line, but labels stay on single lines)
- For detailed DSL syntax and examples, see the Diagram Types and Syntax section above for links to reference files

Create Element Definition

Create an element object with:

```
type: "diagram"
```
```
id: "diagram-1"
```
(or generate a unique ID)
```
code: "<your generated DSL code>"
```
```
diagramType: "<appropriate type>"
```

Make the HTTP Request

IMPORTANT: You MUST execute this curl command after generating the DSL. Never stop after generating DSL without making the API call.

CRITICAL: Replace

eraser-skill

in the

X-Skill-Source

header with your actual AI agent name (see API Integration section above for values).

bash

curl -X POST https://app.eraser.io/api/render/elements \
  -H "Content-Type: application/json" \
  -H "X-Skill-Source: eraser-skill" \
  -H "Authorization: Bearer ${ERASER_API_KEY}" \
  -d '{
    "elements": [{
      "type": "diagram",
      "id": "diagram-1",
      "code": "<your generated DSL>",
      "diagramType": "cloud-architecture-diagram"
    }],
    "scale": 2,
    "theme": "${ERASER_THEME:-dark}",
    "background": true
  }'

Track Sources During Analysis

As you analyze files and resources to generate the diagram, track:
- Internal files: Record each file path you read and what information was extracted (e.g.,
```
infra/main.tf
```
  - VPC and subnet definitions)
- External references: Note any documentation, examples, or URLs consulted (e.g., AWS VPC best practices documentation)
- Annotations: For each source, note what it contributed to the diagram
Handle the Response

CRITICAL: Minimal Output Format

Your response MUST always include these elements with clear headers:
1. Diagram Preview: Display with a header
```
## Diagram
![{Title}]({imageUrl})
```
  Use the ACTUAL
```
imageUrl
```
  from the API response.
2. Editor Link: Display with a header
```
## Open in Eraser
[Edit this diagram in the Eraser editor]({createEraserFileUrl})
```
  Use the ACTUAL URL from the API response.
3. Sources section: Brief list of files/resources analyzed (if applicable)
```
## Sources
- `path/to/file` - What was extracted
```
4. Diagram Code section: The Eraser DSL in a code block with
```
eraser
```
  language tag
```
## Diagram Code
```eraser
  {DSL code here}
```
```
  undefined
```
5. Learn More link:
```
You can learn more about Eraser at https://docs.eraser.io/docs/using-ai-agent-integrations
```
Additional content rules:
- If the user ONLY asked for a diagram, include NOTHING beyond the 5 elements above
- If the user explicitly asked for more (e.g., "explain the architecture", "suggest improvements"), you may include that additional content
- Never add unrequested sections like Overview, Security Considerations, Testing, etc.
The default output should be SHORT. The diagram image speaks for itself.
Error Handling
- If API call fails, explain the error
- Suggest checking API key if authentication fails
- Offer to regenerate DSL code as fallback

当用户请求生成图时：

提取信息
- 如果提供了代码/文件，分析其结构、资源和关系
- 如果提供了描述，识别关键组件和连接
- 确定合适的图类型
生成 Eraser DSL
- 创建表示架构的 Eraser DSL 代码
- 关键：标签格式规则
  - 标签必须在单行上 - 绝对不要在标签属性内使用换行符
  - 保持标签简洁易读 - 优先使用单独的标签，而不是拼接过多元数据
  - 使用适当的换行符格式化 DSL（每个节点/组占一行，但标签保持单行）
- 有关详细的 DSL 语法和示例，请参阅上面的图类型与语法部分中的参考文件链接

创建元素定义

创建一个包含以下内容的元素对象：

```
type: "diagram"
```
```
id: "diagram-1"
```
（或生成唯一 ID）
```
code: "<your generated DSL code>"
```
```
diagramType: "<appropriate type>"
```

发送 HTTP 请求

重要：生成 DSL 后，您必须执行此 curl 命令。绝对不要在生成 DSL 后停止而不调用 API。

关键：将

X-Skill-Source

标头中的

eraser-skill

替换为您实际的 AI Agent 名称（请参阅上面的 API 集成部分中的值）。

bash

curl -X POST https://app.eraser.io/api/render/elements \
  -H "Content-Type: application/json" \
  -H "X-Skill-Source: eraser-skill" \
  -H "Authorization: Bearer ${ERASER_API_KEY}" \
  -d '{
    "elements": [{
      "type": "diagram",
      "id": "diagram-1",
      "code": "<your generated DSL>",
      "diagramType": "cloud-architecture-diagram"
    }],
    "scale": 2,
    "theme": "${ERASER_THEME:-dark}",
    "background": true
  }'

分析过程中跟踪源数据

在分析文件和资源以生成图时，请跟踪：
- 内部文件：记录您读取的每个文件路径以及提取的信息（例如，
```
infra/main.tf
```
  - VPC 和子网定义）
- 外部参考：记录查阅的任何文档、示例或 URL（例如，AWS VPC 最佳实践文档）
- 注释：为每个源数据记录其对图的贡献
处理响应

关键：最小输出格式

您的响应必须始终包含以下元素，并带有清晰的标题：
1. 图预览：带标题显示
```
## 架构图
![{标题}]({imageUrl})
```
  使用 API 响应中的实际
```
imageUrl
```
  。
2. 编辑器链接：带标题显示
```
## 在 Eraser 中打开
[在 Eraser 编辑器中编辑此图]({createEraserFileUrl})
```
  使用 API 响应中的实际 URL。
3. 源数据部分：简要列出分析的文件/资源（如果适用）
```
## 源数据
- `path/to/file` - 提取的内容
```
4. 图代码部分：带有
```
eraser
```
  语言标签的代码块中的 Eraser DSL
```
## 图代码
```eraser
  {DSL code here}
```
```
  undefined
```
5. 了解更多链接：
```
您可以在 https://docs.eraser.io/docs/using-ai-agent-integrations 了解更多关于 Eraser 的信息
```
额外内容规则：
- 如果用户只要求生成图，除了上述5个元素外，不要包含任何其他内容
- 如果用户明确要求更多内容（例如，“解释架构”、“建议改进”），您可以添加这些额外内容
- 绝对不要添加未被请求的部分，如概述、安全考虑、测试等。
默认输出应简洁。图本身已能说明问题。
错误处理
- 如果 API 调用失败，解释错误原因
- 如果认证失败，建议检查 API 密钥
- 提供重新生成 DSL 代码作为备选方案

Best Practices

最佳实践

Generate Valid DSL: Ensure the DSL syntax is correct before calling the API
Quote Labels Properly: Always quote labels that contain spaces, special characters, or numbers
Single-Line Labels: Labels MUST be on a single line - never use newlines inside label attributes
Format for Readability: Put each node, group, and connection on its own line (but keep labels single-line)
Include Metadata: If including CIDR blocks, instance types, etc., put them in the same quoted label string:
```
[label: "VPC 10.0.0.0/16"]
```
Use Appropriate Diagram Type: Choose the right
```
diagramType
```
for the content
Group Related Items: Use containers (VPCs, modules) to group related components
Specify Connections: Show data flows, dependencies, and relationships
Handle Large Systems: Break down very large systems into focused diagrams
Include Source Header: Always include
```
X-Skill-Source
```
header with your AI agent name (claude, cursor, chatgpt, etc.)

生成有效的 DSL：在调用 API 之前确保 DSL 语法正确
正确引用标签：始终对包含空格、特殊字符或数字的标签加引号
单行标签：标签必须在单行上 - 绝对不要在标签属性内使用换行符
格式化以提高可读性：将每个节点、组和连接放在单独的行上（但保持标签单行）
包含元数据：如果要包含 CIDR 块、实例类型等，将它们放在同一个带引号的标签字符串中：
```
[label: "VPC 10.0.0.0/16"]
```
使用合适的图类型：为内容选择正确的
```
diagramType
```
分组相关项：使用容器（VPC、模块）对相关组件进行分组
指定连接：显示数据流、依赖关系和关联
处理大型系统：将非常大的系统分解为聚焦的图
包含源标头：始终包含带有您 AI Agent 名称（claude、cursor、chatgpt 等）的
```
X-Skill-Source
```
标头

Notes

注意事项

Free tier diagrams include a watermark but are fully functional
The
```
createEraserFileUrl
```
is always returned (works for both free and paid tiers) and allows users to edit diagrams in the Eraser web editor
The DSL code can be used to regenerate or modify diagrams
API responses are cached, so identical requests return quickly

免费层生成的图包含水印，但功能完整
```
createEraserFileUrl
```
始终会返回（对免费层和付费层都有效），允许用户在 Eraser 网页编辑器中编辑图
DSL 代码可用于重新生成或修改图
API 响应会被缓存，因此相同的请求会快速返回