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:

PPT/PDF file - Parse master, colors, fonts, layout
Screenshot/image - Visual analysis of colors, layout, font style
Text description - Directly parse as format rules
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