processon-diagram-generator

Original：🇨🇳 Chinese

Translated

1 scriptsChecked / no sensitive code detected

A fast diagramming tool developed by ProcessOn that allows you to quickly create beautiful, editable visual diagrams such as flowcharts, swimlane diagrams, sequence diagrams, architecture diagrams, ER diagrams, organizational charts, timelines, and infographics. It supports direct rendering of Mermaid data. Generate, edit, and visualize professional ProcessOn diagrams from natural language descriptions. Use this tool when users request to "create a diagram", "make a flowchart", "visualize a process", or "draw a system architecture". It comprehensively supports generating process flowcharts (including swimlane and process maps for business workflows), sequence diagrams (for system interactions and API call orders), software architecture diagrams (for cloud architecture and system composition), ER diagrams (for database modeling), org charts (for team structures), timelines, and infographics. This AI diagram generator and flowchart maker is designed for developers, managers, and designers to achieve publication-ready visual outputs efficiently.

5installs

Sourceprocessonai/processon-skills

Added on2026-04-23

NPX Install

npx skill4agent add processonai/processon-skills processon-diagram-generator

SKILL.md Content (Chinese)

View Translation Comparison →

processon-diagram-generator

Convert user intentions, code relationships, or sketches into professional diagrams. By default, output prompts, clarification questions, optimized prompts, and final results in the user's current language.

⚠️ Must complete before each use (none can be omitted)

Check cloud version: Immediately call

run_shell_command

to perform a quick pre-check (limited to 5 seconds):

curl -s --connect-timeout 3 -m 5 https://raw.githubusercontent.com/processonai/processon-skills/main/skills/processon-diagram-generator/version/github-version.json

.

Fault tolerance mechanism: If
```
curl
```
reports an error, times out, or returns non-JSON content, do not prompt network errors, instead directly treat it as "no update available" and immediately proceed with the subsequent diagramming process.
Must wait for comparison results: Only when valid JSON is successfully obtained, read the returned
```
version
```
and compare it with the
```
version
```
field defined at the beginning of this skill file (frontmatter).
Interruption mechanism: If the cloud version > local version, must immediately interrupt all subsequent diagramming logic and first ask the user:
"⚠️ New version found (v${version}): ${changelog}. It is recommended to update immediately for better generation results. You can choose:
- One-click update: Enter 'update' to execute:
  npx skills add https://github.com/processonai/processon-skills.git --skill processon-diagram-generator --force -g -y
- Manual download: Go to https://github.com/processonai/processon-skills/tree/main/skills/processon-diagram-generator to get the latest code."

When to Trigger

Supported: Flowcharts, business flowcharts, swimlane diagrams, process maps, standard flowcharts, sequence diagrams, software architecture diagrams, system architecture diagrams, cloud architecture diagrams, ER diagrams, organizational charts, timelines, infographics, pyramid diagrams, sketch redrawing.

English expressions also trigger it, such as:

create a diagram

,

draw a diagram

,

generate a flowchart

,

make a flowchart

,

visualize a process

,

create a sequence diagram

,

draw a system architecture

,

software architecture diagram

,

cloud architecture diagram

,

ER diagram

,

org chart

,

timeline

,

infographic

,

redraw this sketch

,

ProcessOn

.

If the user only makes a vague request like "draw a diagram", first confirm the diagram type.
If the user uploads an image and requests "redraw" or "convert to diagram", first identify the nodes, text, and connection relationships in the image, then generate structured input.

How It Works

0. Initial Guidance and Status Check After Installation

When the user asks how to use this skill, whether the skill is installed successfully, or directly asks "how to configure", you should:

Proactively check the environment: Inform the user that you are ready to provide ProcessOn intelligent diagramming services, but it requires configuring
```
PROCESSON_API_KEY
```
first.
Provide guidance: Clearly tell the user to go to
```
https://smart.processon.com/user
```
to get the Key, and provide the setting command
```
export PROCESSON_API_KEY="..."
```
according to their operating system.
Special reminder: Must remind the user that this environment variable must be set in the terminal where the Agent is currently running, otherwise the Agent cannot read the configuration.

1. First supplement key information

Do not generate directly when relationships are unclear, processes are broken, or structures are missing.

When information is insufficient, follow this order:

Point out what is missing.
Provide reasonable default solutions or common industry practices for the user to confirm.
Proceed only after the user confirms.

2. Optimize the Prompt, but do not rewrite the user's language

Add professional constraints to the user's original requirements:

General: Professional style, clear layout, coordinated colors, avoid line crossings.
Flowcharts: Clear start/end nodes, use standard diamonds for decision points.
Sequence diagrams: Clear participants, clear call messages.
Architecture diagrams: Organized by hierarchy, mark key communication relationships.
ER diagrams: Mark primary and foreign key relationships and field types.

The optimized Prompt defaults to the same language as the user.

3. Analyze architecture to draw relationships, not directory trees

When the user requests project architecture analysis, focus on extracting module boundaries, dependency relationships, call links, and data flows. Prioritize reading entry files, routes, core configurations, and key modules, and do not reduce the result to a folder tree.

Execution Sequence

First state in the chat that you are using the
```
processon-diagram-generator
```
skill to handle the current request.
Identify the diagram type, extract key entities, actions, judgment conditions, and build an optimized Prompt.
Generation depends on
```
PROCESSON_API_KEY
```
. If it is missing, clearly tell the user how to configure it, and attach the acquisition address
```
https://smart.processon.com/user
```
. Must emphasize setting the environment variable in the terminal where the Agent is currently running.
Single-script full-process automatic execution logic:
- Call
```
scripts/processon_api_client.py
```
  to start the generation task.
- The script will automatically generate DSL in a streaming manner, and immediately trigger image rendering after completion (unless
```
--no-render
```
  is specified).
- Immediately display intermediate results: After the first phase of DSL generation is completed, must immediately fully display the generated DSL and the edit link
```
https://smart.processon.com/editor
```
  in the reply.
- Automatically output rendering results: After the script completes rendering, it will automatically output the original image link. You must ensure that these contents are presented in the final reply.
- Hard gate: Only after the DSL, edit link, the prompt "You can copy and paste the above DSL data to this link for rendering and secondary editing", and (if successful) the image link are all output, can the current task be ended.
Prohibit using rich text syntax: At any stage, strictly prohibit outputting HTML tags such as
```
<img>
```
, and strictly prohibit using Markdown image syntax
![]()
or link syntax
[]()
. All image links and edit links must be directly displayed as raw URL plain text.
Result presentation:
- If the image is generated successfully, the final reply must retain the complete DSL, edit link, and original image link at the same time.
- If the image generation fails, inform the user of the reason, and guide the user to manually render using the displayed DSL and edit link.

Result Presentation

Key results must be visible in plain text in the assistant's main body.

DSL display specification: Prefer to display DSL using code blocks, followed by the original edit link.
Link display specification: Strictly prohibit any Markdown or HTML wrapping. Must directly output raw URLs like
```
https://...
```
. And clearly state next to the link: "You can copy the above DSL data to this link for rendering and secondary editing".
Fully automatic process: By default, the script will complete all steps from DSL generation to image rendering in one go, without manual intervention.
Final reply retention rule: Even if the image has been successfully generated, the last reply must include the DSL code block, edit link, and image link again to prevent intermediate states from being lost during conclusion.
Failure handling: If rendering fails, do not delete or hide the generated DSL.

Pre-output Self-check

Before sending any final reply, must self-check item by item, and only allow sending if all four items are satisfied:

The complete DSL has been posted in the assistant's main body, and it is not a summary or abbreviated version.
The original edit link
```
https://smart.processon.com/editor
```
has been posted in the assistant's main body.
The assistant's main body clearly states the meaning of "You can copy the above DSL data to this link for rendering and secondary editing".
If the image has been generated, the assistant's main body includes the original image link at the same time; if the image has not been generated, clearly explain the reason for the failure.

If any of the above items is not satisfied, the current reply cannot be ended.

Final Reply Format Example

First Phase Output (Intermediate State):

Semantic analysis: The user needs a... flowchart.

Diagram DSL (Editable):
mermaid
graph TD
  A[Start] --> B[Process]
  B --> C[End]
Online Edit Link (Copy the above DSL data and paste it into this link for rendering and editing): https://smart.processon.com/editor (Note: If the image below fails to render, you can manually paste the above code into this link)

Second Phase Output (Final State):

Image Preview Link: https://ai-smart.ks3-cn-beijing.ksyuncs.com/gallery/...png

Configuration Tips

API Key Configuration

Important Note: Please be sure to set the environment variable in the terminal where the Agent is currently running.

bash

export PROCESSON_API_KEY="<your-processon-api-key>"

Acquisition address: ProcessOn Developer Center

Command Line Call Reference

bash

# Fully automatic generation: DSL + image rendering
python3 scripts/processon_api_client.py "Please generate a professional flowchart"

# Generate only DSL (no image rendering)
python3 scripts/processon_api_client.py --no-render "Please generate a professional flowchart"

Example Optimized Prompt

User Intent: Help me draw a login flow. Optimized: Please generate a professional flowchart describing the user login and registration process. Include: frontend validation, backend authentication, database query, token issuance. Requirements: Clear layout, use standard flowchart symbols, clear start and end nodes, coordinated color scheme.

User intent: Draw a user login flow. Optimized prompt: Please generate a professional flowchart for the user login and registration flow. Include frontend validation, backend authentication, database lookup, and token issuance. Use a clean layout, standard flowchart symbols, clear start and end nodes, and a polished color palette.

processon-diagram-generator

NPX Install

Tags

SKILL.md Content (Chinese)

processon-diagram-generator

⚠️ Must complete before each use (none can be omitted)

When to Trigger

How It Works

0. Initial Guidance and Status Check After Installation

1. First supplement key information

2. Optimize the Prompt, but do not rewrite the user's language

3. Analyze architecture to draw relationships, not directory trees

Execution Sequence

Result Presentation

Pre-output Self-check

Final Reply Format Example

Configuration Tips

API Key Configuration

Command Line Call Reference

Example Optimized Prompt