Smart Chart Studio - Consultative Chart Workflow
Overview
Unlike traditional "give data, get chart" tools, Smart Chart Studio is a consultative chart workflow:
- Ask First, Draw Second: 4-round Q&A conversation collects intent, elements, visual, and format requirements before generating
- Intent Routing: Identifies 14 expression purposes (flow/structure/comparison/trend/causal...), auto-selects from Mermaid / Chart.js / SVG Layout / SVG Template engines
- Visual Enhancement: Number highlighting, animation effects, annotations - post-processing after generation
- Format Compliance: Learns enterprise templates (PPT/screenshot/text description), saves as Profile for reuse
- Scenario Composition: Project status, work summary scenarios output multi-chart compositions, not single charts
Execution Flow
Q&A Collection -> Intent Routing -> Engine Render -> Visual Enhance -> Format Compliance -> Delivery
(4 rounds) (14 purposes) (4 engines) (optional) (optional) (HTML/SVG/PNG)
Each step is skippable - no visual enhancement if user doesn't ask, no format compliance if user doesn't specify.
Phase 1: Q&A Collection (4-Round System)
Round 1: Intent Detection (Required)
Don't ask "what chart do you want", ask "what are you trying to express":
> What are you trying to express with this chart?
> Examples: show a process, analyze causes, compare options, show data trends, explain structure, project status, work summary...
User expression patterns:
- "Draw our company's procurement approval process" -> Process/Flow
- "Analyze why customers are leaving" -> Causal/Analysis
- "Compare three suppliers" -> Comparison
- "Q3 department expense breakdown" -> Proportion
- "What modules does the system have and how they interact" -> Relationship/Network
- "How is the project going" -> Project Status (scenario)
- "Make a quarterly work summary" -> Work Summary (scenario)
Intent rules: See references/intent-router.md
Round 2: Element Collection (Intent-Specific)
Based on Round 1 intent, ask for key elements. See references/qa-playbook.md for detailed question templates per category.
Core principles:
- Ask max 2-3 questions per round, don't overwhelm
- Provide examples to help user understand
- Skip questions if user already provided sufficient info in Round 1
Currency Handling: When chart data involves amounts, proactively ask currency preference:
> The chart contains amount data. Which currency to display?
> - CNY (Yuan)
> - USD (Dollar)
> - Other currency (please specify)
> - No currency symbol needed
Remember user preference, don't re-ask within the same session.
Round 3: Visual Enhancement (Optional, has defaults)
> Need visual enhancement? (Optional, has defaults)
> - Key number highlighting
> - Animation effects (number counter/bar grow/line draw)
> - Annotations (callout bubbles/arrows/area highlight)
> - No, default is fine
Enhancement rules: See references/visual-enhancement.md
Round 4: Format Compliance (Optional, has defaults)
> What format should this chart use?
> - Use my saved format profile (list available Profiles)
> - Provide new template for learning
> - Describe format requirements in text
> - Default style is fine
Template learning: See references/template-learning.md
Phase 2: Intent Routing
14 expression purposes -> 4 rendering engines mapping:
| Purpose | Engine | Chart Types |
|---|---|---|
| Process/Flow | Mermaid.js | Flowchart/Swimlane/SOP/Value Stream |
| Time/Sequence | Mermaid.js | Gantt/Sequence/Milestone/PERT |
| Cycle/Loop | Mermaid.js | PDCA/OODA/Feedback/Flywheel |
| Causal/Analysis (tree) | Mermaid.js | Decision Tree/Fault Tree/Logic Tree |
| Structure/Hierarchy | SVG Layout | Org Chart/WBS/Mind Map/Tree |
| Relationship/Network | SVG Layout | Architecture/Topology/ER/Dependency |
| Spatial/Physical | SVG Layout | Circuit/Schematic/Layout/P&ID |
| Framework/Model | SVG Template | SWOT/BCG Matrix/Canvas/Five Forces |
| Proportion | Chart.js | Pie/Donut/Treemap/Stacked Bar/Funnel/Sankey |
| Trend/Change | Chart.js | Line/Area/Candlestick/Waterfall |
| Data/Distribution | Chart.js | Bar/Scatter/Heatmap/Bubble/Boxplot/Radar |
| Comparison (data) | Chart.js | Comparison Bar/Radar |
| Comparison (no data) | SVG Template | Comparison Table/Quadrant |
| Causal (fishbone) | SVG Template | Fishbone/5Why |
| Project Status | Scenario Combo | Kanban+Gantt+Burndown+Risk Matrix |
| Work Summary | Scenario Combo | Radar+Timeline+Pie+SWOT |
Detailed routing rules: See references/intent-router.md
Phase 3: Engine Render
The agent generates chart code directly using the templates in the reference files. No helper scripts are needed - the agent has full capability to produce HTML, SVG, and Mermaid code from the templates.
Mermaid.js Engine
For: Flowcharts, sequence diagrams, Gantt charts, state diagrams, ER diagrams, decision trees
The agent generates Mermaid syntax and wraps it in an HTML page with the Mermaid CDN link.
Templates: See references/engine-mermaid.md
Chart.js Engine
For: Pie, bar, line, radar, scatter, area charts
The agent generates Chart.js config JSON and wraps it in an HTML page with the Chart.js CDN link.
Templates: See references/engine-chartjs.md
SVG Layout Engine
For: Org charts, architecture diagrams, circuit diagrams, topology, SWOT matrix
The agent generates SVG code directly using the layout templates.
Templates: See references/engine-svg.md
SVG Template Engine
For: Fishbone diagrams, comparison tables, quadrant charts, 5Why analysis
The agent fills predefined SVG templates with user data.
Templates: See references/engine-svg.md
Phase 4: Visual Enhancement (Optional)
Post-processing after chart generation, doesn't change original data, only enhances presentation.
Number Highlighting
User says "enlarge that revenue number", skill in output:
- Key metrics enlarged (specified number 48px)
- YoY/MoM highlight (red up, green down - China stock convention)
- Target vs actual comparison bar
- Anomaly red alert circle
Animation Effects
User says "add animation", skill injects into HTML output:
- Number counter animation (0 -> target)
- Bar chart grow animation
- Line chart draw animation
- Pie chart sector expand
- Flow line dash animation
Constraint: Animations only work in HTML output, auto-disabled for PNG/SVG export.
Annotations
User says "add a note at this node":
- Callout bubble (with leader line)
- Arrow pointer
- Area highlight/circle
- Legend/watermark/footer
Detailed rules: See references/visual-enhancement.md
Phase 5: Format Compliance (Optional)
Mode A: Preset Standards
Built-in department configs (finance/marketing/rd/executive), ready to use.
Mode B: Template Learning
User provides template -> Skill parses format rules -> User confirms -> Save as Profile -> Auto-apply subsequently.
4 ways to provide template:
1. PPT/PDF file - Parse master, colors, fonts, layout
2. Screenshot/image - Visual analysis of colors, layout, font style
3. Text description - Directly parse as format rules
4. Reference sample - Extract color and layout features
4 dimensions of format rules extracted:
- Color scheme (primary/secondary/accent/up-down/palette sequence)
- Font spec (title/body/number font + size)
- Layout (page size/margins/title position/chart area ratio)
- Header/footer (Logo/doc number/signature block/watermark)
Detailed rules: See references/template-learning.md
Profile Management
- Profiles are JSON objects; the calling agent saves/loads them via its file tools
- User can have multiple Profiles (department/executive/external)
- Specify which Profile to use per chart generation
- Can set default Profile
Phase 6: Delivery Output
Three output formats:
| Format | Use Case | Features |
|---|---|---|
| HTML | In-conversation preview | Interactive, supports animation |
| SVG | Vector editing | Scalable, re-editable |
| PNG | Paste to PPT/docs | Raster, ready to use |
The agent generates HTML/SVG strings directly from templates and writes them to the user's chosen directory.
Scenario Templates
Project Status
When user says "draw project status", not a single chart but a composition:
- Project Kanban (status/progress/risk)
- Milestone Timeline (nodes/deliverables)
- Resource Allocation (headcount/budget/hours)
- Burndown Chart (planned vs actual)
- Risk Matrix (probability x impact)
Template: See references/scenario-templates/project-status.md
Work Summary
When user says "make a work summary", composition based on sub-needs:
- OKR/KPI Achievement Radar
- Work Achievement Timeline (quarterly/monthly)
- Skill Growth Map (skill matrix)
- Workload Distribution (project proportion pie)
- Strengths/Weaknesses SWOT self-assessment
Template: See references/scenario-templates/work-summary.md
Execution Checklist
Check in this order each time:
- [ ] Round 1 Q&A: Identify expression purpose
- [ ] Round 2 Q&A: Collect chart elements
- [ ] Round 3 Q&A: Confirm visual enhancement needs (optional)
- [ ] Round 4 Q&A: Confirm format compliance needs (optional)
- [ ] Intent routing: Select rendering engine
- [ ] Engine render: Generate chart code
- [ ] Visual enhancement: Apply number/animation/annotation (if needed)
- [ ] Format compliance: Apply Profile or learn new template (if needed)
- [ ] Delivery: Generate HTML + SVG + PNG
- [ ] Present: Call present_files to show output
Notes
- China stock convention: Red = up, Green = down
- Currency: When amounts are involved, proactively ask user preference in Round 2 (CNY/USD/other/none), don't hardcode default
- Animations only work in HTML output, PNG/SVG are static
- Profile files should not contain sensitive information
- When user doesn't specify format, use default style, don't force asking
