CLAUDE.AI Native Visualization Types

claude inchat visualizations infographic
Native Visualization Types — Aletheus

Quick Reference · Claude Chat Interface

Native Visualization Types

All types render inline — no file export
Iterable within the conversation
Adjust color, layout, density on request

1 SVG Diagram

Vector Graphics & Diagrams

Scalable, crisp graphics rendered directly in chat. No interaction — purely visual. Your highest-fidelity static option, and probably your workhorse for structural and relational work.

Good for

Flowcharts Timelines Org charts Process flows Narrative structure Chapter maps

Sample prompt

“Create an SVG flowchart of this editorial workflow. Muted palette — deep teal background, warm paper, rust accent.”
2 Interactive HTML

HTML Widgets & Dashboards

Renders inline with live interactivity — buttons, filters, toggles, animations. Stateless on load. Use when you need to navigate or explore information rather than just read it.

Good for

Dashboards Tabbed references Filters Click-to-reveal detail Calculators

Sample prompt

“HTML widget: tabs for each act, each tab shows scene list and POV character. Dark editorial aesthetic.”
3 React Component

Stateful Interactive UI

Full React with state and logic. Use when information must respond to input and maintain context across interactions.

Good for

Character arc explorer Narrative navigator Dependency mapper

Sample prompt

“React: click a character name, show their arc with key turning points.”
4 Mermaid

Quick Syntax Diagrams

Markdown-style diagram syntax. Fast and low-effort. Limited aesthetic control. Good for rough structure before committing to polished SVG.

Good for

Decision trees Entity relations Fast drafts Sequence flows

Sample prompt

“Mermaid diagram of the plot dependencies in this synopsis. Speed over style.”
5 Network Diagram

Relationship Networks

Nodes and edges showing connections. Can be SVG or React/D3. Ideal for character webs, thematic links, intertextual maps.

Good for

Character webs Thematic links Source maps Influence networks

Sample prompt

“SVG network: characters as nodes, relationships as labeled edges. Warm parchment palette.”
6 Tables & Structured Data

Formatted Tables · Timelines as Text · Comparison Matrices

Not graphic, but structured. Renders in markdown as formatted tables. Use for comparisons, chronologies, attribute lists — anywhere rows and columns do the work better than a diagram.

Good for

Character comparison Scene-by-scene breakdown Chronological timeline Source comparison Attribute matrix Research summary Chapter log with counts

Sample prompt

“Table: each chapter, POV character, location, primary conflict, and page-count estimate. Add a totals row.”

Style controls you can specify

  • Named color palette or hex values
  • Font family preferences
  • Dark vs. light background
  • Density — sparse, moderate, or dense
  • Label verbosity — minimal or annotated
  • Layout direction — top-down, left-right, radial
  • Animation — none, subtle, or expressive

How to iterate in conversation

  • “Change the palette to deep navy and warm cream”
  • “Make the typography larger and more editorial”
  • “Add a legend to the bottom right”
  • “Collapse secondary nodes — show primary only”
  • “Convert this SVG into an interactive HTML version”
  • “Export this as a standalone HTML file I can save”
  • “Apply the Aletheus Ember Light colorway”

aletheus.com  ·  Narrative Strategies  ·  © 1996–2026

a

Leave a Reply

Create a website or blog at WordPress.com

Up ↑

Discover more from aletheus; a compendium

Subscribe now to keep reading and get access to the full archive.

Continue reading