Back to ChartStudio

ChartStudio Documentation

Semantic Diagram Intelligence — Complete Guide

Understand what your diagram means,
not just how it looks.

ChartStudio goes beyond syntax. It organizes messy notes into structured plans, renders them across multiple diagram languages, and provides semantic analysis that no other diagramming tool offers.

Open ChartStudio

What Makes This Different

Almost every diagram tool in the market focuses on one thing: write diagrams faster. ChartStudio focuses on something different: understand what the diagram means.

Semantic Intelligence

Detect missing steps, identify bottlenecks, score complexity, and analyze gaps — automatically. No other Mermaid tool does this.

Multi-Language Rendering

Mermaid, Graphviz DOT, and PlantUML — pick the best language for each view mode, or let ChartStudio choose automatically.

Audience Translation

Rewrite your plan for executives, team members, clients, or the public — same structure, different vocabulary.

Knoll-Style Dashboards

Generate beautifully arranged metrics dashboards with Apple-quality design. Grid-aligned cards, balanced typography, storytelling with data.

Core Workflow

1

Describe Your Idea

Type raw notes, a project brief, or a messy brain dump. ChartStudio accepts any format — bullet points, paragraphs, stream of consciousness.

Launch a SaaS product for small businesses
- need user auth, billing (Stripe), admin panel
- MVP by March, full launch by June
- team: 2 devs, 1 designer, 1 PM
- worried about scope creep
2

AI Organizes It

The AI structures your notes into an IdeaModel — sections, steps, roles, dependencies, and suggestions. This is the canonical source of truth.

The IdeaModel is not a diagram. It's a semantic representation of your plan that can be rendered into any diagram language, analyzed for gaps, or translated for different audiences.

3

Visualize From Every Angle

Switch between 6 view modes and 3 diagram languages. Each combination reveals different insights about the same plan.

WorkflowMermaid

Process flowchart with sections

TimelineMermaid

Chronological progression

RolesMermaid/Graphviz

Who does what (swimlanes)

NarrativeMermaid

Setup, action, outcome arc

DependenciesGraphviz

What blocks what (DAG)

ActivityPlantUML

Swimlane activity flow

4

Analyze Semantically

Run AI-powered analysis tools that understand the meaning of your plan, not just its syntax.

Complexity ScoreInstant

Deterministic 0–100 score from structural properties: step count, dependency depth, cross-section deps, role count, branching factor.

Gap AnalysisAI

Find missing steps, broken dependencies, role gaps, and scope gaps. Each gap includes severity, rationale, and a suggested fix.

Risk DetectionAI

Identify bottlenecks, resource overload, parallelization opportunities, and complexity hotspots with mitigation suggestions.

Audience TranslationAI

Rewrite labels and details for executive, team, client, or public audiences while preserving structure and dependencies.

Plan ComparisonAI

Diff two versions of a plan: added/removed/modified steps, dependency changes, and a plain-language summary.

5

Generate Dashboards

Create knoll-style metrics dashboards that tell a story with your data. Apple-quality design defaults.

The dashboard auto-extracts metrics from your plan: completion percentage, steps by status, role distribution, complexity score, and section breakdown. Also supports custom KPIs for any data you want to visualize.

Progress rings
Horizontal bars
Status indicators
Number cards
Bar lists
Grid layout

Architecture

The IdeaModel is the single source of truth. Diagram languages (Mermaid, PlantUML, Graphviz) are rendering targets, not storage formats. AI produces IdeaModel JSON, not raw diagram code.

Raw Notes
  ↓ AI organize
IdeaModel (JSON) ← canonical source of truth
  ↓ renderers
MermaidGraphviz DOTPlantUML
  ↓ backends
mmdc (local)graphviz (local)Kroki (HTTP)
  ↓
SVG / PNG / JPG

For Graphic Designers

ChartStudio generates production-ready SVG outputs. Every diagram uses professional themes with consistent typography, balanced spacing, and clean visual hierarchy.

  • 6 predefined themes: Default, Clean, Dark, Forest, Blueprint, Presentation
  • Theme system converts consistently across Mermaid, Graphviz, and PlantUML
  • Knoll-style dashboard generator with Apple HIG design tokens
  • SVG output for infinite scaling — perfect for print, presentations, and web
  • Base64 encoding for direct embedding in any application

For Data Visualists

ChartStudio's semantic intelligence layer is what sets it apart. These features don't exist in the broader Mermaid/diagram ecosystem.

What others do

  • Syntax highlighting
  • Auto-layout
  • Export to PNG
  • Template galleries

What ChartStudio does

  • Detect missing steps
  • Identify bottlenecks
  • Score complexity
  • Translate for audiences
  • Generate metric dashboards
  • Compare plan versions

API Reference

ChartStudio runs as a FastAPI server on localhost:8100. All endpoints accept JSON and return JSON.

IdeaModel Operations
POST/api/idea/organizeRaw notes → structured plan
POST/api/idea/modifyPatch plan with instruction
POST/api/idea/simplifyReduce noise and merge duplicates
POST/api/idea/explainPlain-language explanation
POST/api/idea/translateReframe for an audience
Analysis
POST/api/analysis/gapsAI gap analysis
POST/api/analysis/risksAI risk detection
POST/api/analysis/complexityDeterministic scoring (instant)
POST/api/analysis/compareDiff two plan versions
POST/api/analysis/missing-stepsHeuristic checks (instant)
Rendering
POST/api/render/viewIdeaModel → diagram image
POST/api/render/rawRaw source → image
POST/api/render/previewSame as /view (base64)
POST/api/render/validateSyntax validation
Dashboard
POST/api/dashboard/from-modelIdeaModel → metrics SVG
POST/api/dashboard/from-kpisCustom KPIs → dashboard SVG
Diagram (Direct)
POST/api/diagram/generateAI generates Mermaid
POST/api/diagram/modifyAI patches diagram
POST/api/diagram/explainExplain diagram

MCP Tool Integration

ChartStudio registers 10 tools with the Eden MCP server, making all capabilities available to AI agents via the tool-calling protocol.

chartstudio_organizeRaw text → IdeaModel plan
chartstudio_modify_planPatch plan with instruction
chartstudio_simplifySimplify plan
chartstudio_translateAudience translation
chartstudio_render_viewRender diagram in any mode/language
chartstudio_analyze_gapsAI gap analysis
chartstudio_detect_risksAI risk detection
chartstudio_complexityComplexity score (instant)
chartstudio_compareDiff two plans
chartstudio_dashboard_modelIdeaModel → dashboard SVG
chartstudio_dashboard_kpisCustom KPIs → dashboard SVG

Cancel & Progress

Long-running AI operations (organize, modify, translate, analysis) now show a StatusBar in the header with the operation name, an elapsed time counter, and a cancel button.

  • Every API call uses an AbortController — cancelling is instant
  • The elapsed timer starts automatically when an operation begins
  • Press the × button (or use keyboard) to abort in-flight requests
  • Error messages are classified by type (user input, AI failure, dependency missing, timeout)

Keyboard & Accessibility

ChartStudio is fully keyboard-navigable and screen-reader friendly.

Navigation

  • Tab — Move through interactive elements
  • Skip link — Press Tab on page load to jump past navigation
  • ? — Open help panel
  • Escape — Close panels and dialogs

Screen Readers

  • Tab bars use role="tablist" / role="tab"
  • Status messages announced via aria-live
  • Errors announced with role="alert"
  • Cancel button labeled for assistive technology

Running ChartStudio

Start the server
uvicorn ChartStudio.server:app --reload --port 8100
Health check
curl http://localhost:8100/api/health
Organize an idea (API)
curl -X POST http://localhost:8100/api/idea/organize \
  -H "Content-Type: application/json" \
  -d '{"raw_text": "Build a mobile app for tracking habits"}'

Help & Documentation

Getting Started

Browse Tools
Explore 135+ document tools by category
ChartStudio
Diagram intelligence — turn ideas into visual plans
ChartStudio Docs
View modes, AI operations, and themes
Pipeline Builder
Chain tools together into automated workflows

Keyboard Shortcuts

?Toggle this help panelEscClose panel / dialog

Tips

  • Hover the ? icons next to field labels for parameter help
  • In ChartStudio, hover view mode pills for descriptions
  • Pipeline Builder: drag between ports to connect steps
  • Use ${step_name.field} to reference previous outputs in pipelines
  • Switch themes in the profile menu (bottom-left)
Press ? anywhere to toggle this panel