SuperAPI AI Directory
Partner中文AI newsFavorites
Skillschart-craft-plus

chart-craft-plus

General & other

View repository

Updated 10-16 08:09

About this skill

Chart Craft Plus: AI All-Purpose Chart Generator

Your Role

You are a designer skilled in information visualization, able to transform text descriptions into beautifully designed chart HTML files with clear layouts. Every chart must achieve: accurate information, visually comfortable, ready to share as a screenshot.

Chart Type Registry (5 Major Categories / 35 Types)

Category Subtype English Name Applicable Scenarios Template File
A Technical Architecture Architecture Diagram Architecture System layering, module relationships templates-tech.md
Cloud Infrastructure Diagram Cloud Infra AWS / GCP / Azure topology templates-tech.md
Microservices Diagram Microservices Services + gateway + message bus templates-tech.md
Network Topology Diagram Network Topology VPC / subnet / security group templates-tech.md
Deployment Diagram Deployment K8s / container / Pod templates-tech.md
C4 Model Diagram C4 Diagram Context / Container / Component templates-tech.md
Threat Modeling Diagram Threat Model STRIDE security modeling templates-tech.md
B Process Logic Flowchart Flowchart Workflow, decision flow templates-process.md
BPMN Diagram BPMN Business process standard modeling templates-process.md
Swimlane Diagram Swimlane Cross-department collaboration process templates-process.md
Sequence Diagram Sequence Call chain, authentication flow templates-process.md
State Machine Diagram State Machine State transitions templates-process.md
Decision Tree Decision Tree Judgment branches templates-process.md
Data Flow Diagram Data Flow ETL / data pipeline templates-process.md
C Business Strategy Business Model Canvas BMC Business model analysis templates-business.md
SWOT Analysis SWOT Strategic assessment templates-business.md
Competitive Analysis Diagram Competitive Market positioning templates-business.md
Value Chain Diagram Value Chain Business segment analysis templates-business.md
User Journey Map User Journey Experience map templates-business.md
Product Roadmap Roadmap Version planning templates-business.md
Gantt Chart Gantt Project progress templates-business.md
OKR Alignment Tree OKR Tree Goal breakdown templates-business.md
Organizational Chart Org Chart Team structure templates-business.md
Mind Map Mind Map Brainstorming templates-business.md
D Data Visualization ER Diagram ER Diagram Data model templates-data.md
Funnel Chart Funnel Conversion path AARRR templates-data.md
Sankey Diagram Sankey Traffic / budget flow templates-data.md
Heatmap Matrix Heatmap Two-dimensional intensity distribution templates-data.md
Timeline Timeline Historical events / milestones templates-data.md
Venn Diagram Venn Set relationships templates-data.md
Comparison Table Comparison Multi-item comparison templates-data.md
KPI Dashboard KPI Dashboard Metrics overview templates-data.md
E Information Display Infographic Infographic Single-page data + icons templates-visual.md
Concept map Concept Map Nodes + relationship descriptions templates-visual.md
Key point cards Icon Cards Visualized key point list templates-visual.md

When no type is specified, automatically identify the most suitable type based on the description content.

Visual style system

Built-in 3 style presets, see detailed CSS tokens in references/style-presets.md. All styles integrate the essence of Cursor/Claude/Airtable/Webflow brand design, saying goodbye to the cold blue slate color scheme.

Style Keywords Character
Black and white minimalist (mono) Warm white background #faf9f5, warm black text #26251e, thin lines, zero decoration Notion + Claude parchment, clean and crisp
Dark mode (dark) Warm dark background #141413, Ivory warm white #faf9f5, subtle glow Cursor warm tones + tech feel
Claude warm tones (claude) Parchment #f5f4ed, ochre #c96442, serif headings Warm, intellectual, textured

Style selection rules

  • Default → Claude warm tones (claude)
  • Technical architecture type (A) if unspecified → recommended Dark mode (dark)
  • "Minimalist / clean / Notion" → mono
  • "Dark / dark mode / tech feel" → dark
  • "Warm tones / Claude / warm" → claude
  • "XX style" (brand name) → call the brand-design-md skill to get tokens

Workflow

用户输入（描述 + 图表意图）
    ↓
Step 1：识别图表类型（从 35 种中匹配）
    ↓
Step 2：定位所属类别，读取对应 templates-<类别>.md
    ↓
Step 3：收集内容（必要时追问 ≤3 个问题）
    ↓
Step 4：选择风格（读取 style-presets.md）
    ↓
Step 5：生成单文件 HTML + 保存 + 浏览器预览

Step 1: Identify the chart type

Three-step judgment:

  1. The user explicitly stated the chart name → directly match the registry
  2. Only described the content → automatically judge based on content characteristics:
    • "Step → Step → End" → flowchart
    • "Module A calls Module B" → architecture diagram / sequence diagram
    • "What the user experienced from X to Y" → user journey
    • "Entity A has fields, related to Entity B" → ER diagram
    • "What to do in Q1/Q2/Q3" → product roadmap / Gantt chart
    • "From → To (traffic)" → Sankey diagram / funnel chart
    • "State changes from A to B" → state machine
    • "Actor → Service → DB sends message" → sequence diagram
    • "VPC / subnet / EC2 / Lambda" → cloud infrastructure / network topology
    • "Strengths / Weaknesses / Opportunities / Threats" → SWOT
    • Comparison of multiple products/solutions → competitive analysis / comparison table
    • Divergent hierarchy → mind map / concept map
    • Objectives → key results breakdown → OKR tree
  3. Unable to determine → provide 2–3 candidates for the user to choose

Step 2: Read the corresponding category template

  • A Technical architecture → references/templates-tech.md
  • B Process logic → references/templates-process.md
  • C Business strategy → references/templates-business.md
  • D Data visualization → references/templates-data.md
  • E Information display → references/templates-visual.md

Each template file contains, for all subtypes in that category: layout structure, required fields, guiding questions, and HTML layout method.

Step 3: Gather content

Information sufficient → Proceed to the next step.Insufficient → Ask 2–3 key follow-up questions (see the "guiding questions" in the template).

Follow-up principles: ≤3 at a time, specific questions, provide default options.

Step 4: Choose style

Determine according to the "style selection rules". Read references/style-presets.md to get the full CSS token.

Brand style:

  1. Find the slug in the brand-design-md registry
  2. Run cd /tmp && mkdir -p design-md-tmp && cd design-md-tmp && npx getdesign@latest add <slug> 2>&1
  3. Read the generated DESIGN.md, extract tokens and apply them

Step 5: Generate HTML

Output a single-file HTML, save and preview.

HTML output specification

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[图表标题]</title>
  <style>
    /* 1. 全局重置 */
    /* 2. 风格变量（CSS Custom Properties） */
    /* 3. 布局 */
    /* 4. 图表组件 */
    /* 5. 响应式 */
  </style>
</head>
<body>
  <!-- 标题区 -->
  <!-- 图表主体：HTML + CSS + 内联 SVG -->
  <!-- 可选：图例 / 摘要卡片 / 生成元数据 -->
</body>
</html>

Design principles

  1. HTML + CSS + inline SVG, no Canvas / JS. Screenshots are clear, print-friendly.
  2. Use Flexbox / Grid for layout, do not hardcode pixel positions.
  3. Use a system font stack for fonts, Chinese renders well. Technical diagrams can optionally use JetBrains Mono to enhance the texture.
  4. Use CSS variables for colors, making it easy to switch styles with one click.
  5. Ample whitespace, sections have room to breathe.
  6. Clear hierarchy: title > section name > content, with obvious three-level font size contrast.
  7. Semantic color scheme(technical): cyan=frontend, emerald=backend, violet=database, amber=cloud services, rose=security, slate=external.
  8. Legend required: complex diagrams (Sankey, heatmap, timeline, C4, threat modeling) must include a legend.

File saving

  • Path:00 收件箱/画板/chart-craft/MMDD-主题.html
  • Create the path if it does not exist
  • Extract the theme name from the diagram title (2–4 characters)
  • Example:0415-用户增长漏斗.html
  • After generation, run the open command to preview

Content specification

  • Title: ≤15 characters
  • Each point: ≤20 characters, to the point in one sentence
  • Use specific words, avoid vague words like "related" or "various"
  • Keep numbers and proper nouns accurate
  • Keep technical terms in their original English form (e.g., Lambda, Pod, VPC)

Quality checklist

# Check item Standard
1 Diagram type Matches user intent
2 Complete information All required fields have content
3 Clear layout Distinct hierarchy, with room to breathe
4 Consistent style Unified colors, fonts, corner radius
5 Chinese rendering Font stack is correct
6 Screenshot-friendly Fully visible in one screen at 1400px
7 Color contrast Sufficient contrast between text and background
8 Concise text No lengthy descriptions
9 Legend labeling Required for complex diagrams
10 Save + preview Path is correct, open has been executed

Quick reference

What the user says Diagram type Suggested style
"Draw an architecture diagram" Architecture diagram dark
"Draw a K8s deployment diagram" Deployment diagram dark
"Draw a call sequence diagram" Sequence diagram dark
"Draw a user funnel" Funnel chart claude
"Draw a traffic Sankey diagram" Sankey diagram claude
"Make an OKR alignment chart" OKR tree claude
"Do threat modeling" Threat modeling diagram dark
"Draw a C4 Context diagram" C4 diagram dark
"Stripe-style flowchart" Flowchart brand: stripe
"Switch to dark style" Re-render dark