infographic

Original：🇨🇳 Chinese

Translated

Create SVG infographics, architecture diagrams, and flowcharts in various styles. Be sure to use this skill whenever the user mentions any of the following scenarios: - Draw flowcharts, architecture diagrams, system diagrams, infographics, schematic diagrams - Use SVG to draw charts, visualize a process or concept - "Help me draw a diagram to explain...", "Generate an architecture diagram", "Draw a schematic" - Visualize text-described systems or processes into diagrams - Want illustrations in specific styles (Anthropic style, dark theme, etc.) Even if the user doesn't explicitly mention "SVG", this skill should be used whenever process/architecture/information visualization is involved.

4installs

Sourcelumincui/skills

Added on2026-04-26

NPX Install

npx skill4agent add lumincui/skills infographic

SKILL.md Content (Chinese)

View Translation Comparison →

SVG Infographics

The drawing is independently determined by two dimensions: chart type and visual style, which can be freely combined with each other.

Step 1: Choose Chart Type

Chart type determines the layout structure (node arrangement, arrow direction, hierarchical relationship).

Type	Applicable Scenarios	Reference Document
layered-flow	Vertical layered process: Session initialization → Loop execution → Result; single main line, emphasizing stage progression	`types/layered-flow.md`
column-layer	Horizontal multi-column architecture: N vertical columns side by side, each column represents a system layer; arrows flow between columns; a shared plane can be at the bottom	`types/column-layer.md`
swimlane	Swimlane diagram: Multiple horizontal participants each occupy a row, messages/arrows flow between swimlanes; suitable for protocol interaction and multi-party collaboration	`types/swimlane.md`
pattern-grid	Pattern comparison grid: Multiple columns display different patterns/schemes side by side, each column has an independent vertical process, with text descriptions at the bottom	`types/pattern-grid.md`
side-by-side	Side-by-side comparison: Two schemes/patterns each occupy half the frame, separated by a dotted line in the middle; suitable for "old vs new", "Scheme A vs Scheme B"	`types/side-by-side.md`
nested-layer	Horizontal layered nested architecture: 3–4 large horizontal layers (e.g., "Application Layer → Production Layer → Data Layer"), each layer has nested sub-blocks, and a control panel can be attached on the left	`types/nested-layer.md`

Selection Logic:

If the user mentions "layered", "stage", "process" →
```
layered-flow
```
If the user mentions "architecture", "system layer", "component" →
```
column-layer
```
If the user mentions "interaction", "protocol", "multi-party" →
```
swimlane
```
If the user mentions "compare multiple schemes/patterns" →
```
pattern-grid
```
or
```
side-by-side
```
Only two schemes to compare →
```
side-by-side
```
; three or more →
```
pattern-grid
```
If the user mentions "layered architecture" with nested sub-modules in each layer and data flow between upper and lower layers →
```
nested-layer
```

Step 2: Choose Visual Style

Visual style determines visual languages such as colors, fonts, arrow styles, which is orthogonal to the type and can be freely combined.

Style	Description	Reference Document
anthropic-flat	Visual language of Anthropic/Claude official documents; low-saturation color blocks, flat without shadows, thin borders	`styles/anthropic-flat.md`

Default Style: Use

anthropic-flat

when not specified.

Step 3: Generate SVG

Read the type document → Understand the layout structure, coordinate specifications, node shapes
Read the style document → Understand the color system, fonts, arrow definitions
Follow the layout specifications of the type document, apply the colors from the style document, and generate a complete SVG
Output the SVG code directly without additional explanations

Adding new types: Create a new
.md
file under
types/
and register it in the type table above.
Adding new styles: Create a new
.md
file under
styles/
and register it in the style table above.