Using Claude or GPT to Generate Declart Diagrams

Declart's TOML format is designed for LLM generation. The structure is explicit and validated — an LLM can produce a well-formed diagram in one shot, and declart validate catches any mistakes before rendering.

📋 Copy to clipboard

Why Declart works well with LLMs

• No layout decisions: the LLM only writes content (labels, structure). The engine handles all visual choices.
• Strict schema: deny_unknown_fields means invalid keys are caught immediately. The LLM cannot silently produce a broken diagram.
• Explicit kind: the kind field tells the parser exactly what to expect. No ambiguity.
• Short format: a typical diagram is 5–20 lines of TOML.

Kind and View

Declart v0.16+ uses a two-level structure:

• kind — the data contract (determines which fields are valid)
• view — the semantic intent (determines how the engine renders it)

Workflow

1. Prompt LLM → TOML output
2. declart validate diagram.toml   # catches errors with clear messages
3. declart render diagram.toml     # produces SVG

If validate fails, paste the error message back to the LLM and ask it to fix the specific field.

Prompt Templates

Tier (Pyramid) — Hierarchies, priority layers

Prompt: "Generate a Declart TOML diagram showing Maslow's hierarchy of needs as a pyramid. Use kind = 'tier', include a title, and list the 5 levels as items from top (apex) to bottom (base)."

kind = "tier"
title = "Maslow's Hierarchy of Needs"

[[items]]
label = "Self-Actualization"

[[items]]
label = "Esteem"

[[items]]
label = "Love & Belonging"

[[items]]
label = "Safety"

[[items]]
label = "Physiological"
emphasis = "primary"

Process — Sequential steps, workflows

Prompt: "Create a Declart TOML diagram for a 4-step CI/CD pipeline. Use kind = 'flow' (process view is the default)."

kind = "flow"
title = "CI/CD Pipeline"

[[items]]
label = "Build"

[[items]]
label = "Test"
emphasis = "primary"

[[items]]
label = "Stage"

[[items]]
label = "Deploy"

Cycle — Closed loops, PDCA, lifecycles

Prompt: "Generate a Declart TOML diagram for the PDCA improvement cycle. Use kind = 'flow' and view = 'cycle'."

kind = "flow"
view = "cycle"
title = "PDCA Cycle"

[[items]]
label = "Plan"

[[items]]
label = "Do"

[[items]]
label = "Check"

[[items]]
label = "Act"

Matrix 2×2 — Prioritization, Eisenhower

Prompt: "Create an Eisenhower Matrix in Declart TOML with x_axis = 'Importance' and y_axis = 'Urgency'."

kind = "matrix"
title = "Eisenhower Matrix"
x_axis = "Importance"
y_axis = "Urgency"

[[quadrants]]
label = "Do First"
position = "top-right"
emphasis = "primary"

[[quadrants]]
label = "Schedule"
position = "top-left"

[[quadrants]]
label = "Delegate"
position = "bottom-right"

[[quadrants]]
label = "Eliminate"
position = "bottom-left"

Note: Use position to explicitly place quadrants. Valid values: top-left, top-right, bottom-left, bottom-right.

Hub-and-Spoke — Central concept with related items

Prompt: "Make a Declart hub-and-spoke diagram with 'Cloud Architecture' as the center and 5 services as spokes."

kind = "hub_spoke"
title = "Cloud Architecture"
center = "API Gateway"

[[spokes]]
label = "Auth Service"

[[spokes]]
label = "User DB"

[[spokes]]
label = "Payment"

[[spokes]]
label = "Notifications"

[[spokes]]
label = "Analytics"

Venn — Set intersections, overlapping groups

Prompt: "Generate a 2-set Venn diagram showing the overlap between 'Frontend Skills' and 'Backend Skills'."

kind = "venn"
title = "Full-Stack Skills"

[[sets]]
label = "Frontend"

[[sets]]
label = "Backend"

[[intersections]]
sets = ["Frontend", "Backend"]
label = "TypeScript"

Timeline — Date-anchored events

Prompt: "Create a Declart timeline of 5 product launch milestones in 2024, using ISO dates."

kind = "timeline"
title = "Product Launch 2024"

[[events]]
date = "2024-01-15"
label = "Alpha"

[[events]]
date = "2024-03-01"
label = "Beta"

[[events]]
date = "2024-06-01"
label = "RC1"

[[events]]
date = "2024-09-15"
label = "GA"

[[events]]
date = "2024-12-01"
label = "v2 Plan"

Rule: dates accept YYYY, YYYY-MM, or YYYY-MM-DD. Partial forms are placed at the start of that year/month. Declart sorts events automatically.

Fishbone / Ishikawa — Root cause analysis

Prompt: "Generate a Declart fishbone diagram where the effect is 'Slow API Response' with 4 cause categories and sub-causes. Use kind = 'hierarchy' and view = 'fishbone'. Each cause category is a root node; sub-causes have parent = the category label."

kind = "hierarchy"
view = "fishbone"
title = "Slow API Response"

[[nodes]]
label = "Database"

[[nodes]]
label = "Missing indexes"
parent = "Database"

[[nodes]]
label = "N+1 queries"
parent = "Database"

[[nodes]]
label = "Network"

[[nodes]]
label = "High latency"
parent = "Network"

[[nodes]]
label = "Code"

[[nodes]]
label = "Blocking I/O"
parent = "Code"

[[nodes]]
label = "Infrastructure"

Structure: Root nodes (no parent) become cause categories on the spine. Child nodes become sub-causes. The effect field is rendered as the spine-end effect label; if effect is omitted, title is used as fallback.

Limit: 2–20 root nodes (cause categories). Recommend 8 or fewer for readability.

Org Chart — Hierarchical trees

Prompt: "Create a Declart org chart for a small engineering team with a CTO at the top. Use kind = 'hierarchy'. With a single root node, the engine automatically renders as an org chart."

kind = "hierarchy"
title = "Engineering Team"

[[nodes]]
label = "CTO"

[[nodes]]
label = "Frontend Lead"
parent = "CTO"

[[nodes]]
label = "Backend Lead"
parent = "CTO"

[[nodes]]
label = "FE Developer"
parent = "Frontend Lead"

[[nodes]]
label = "BE Developer"
parent = "Backend Lead"

Rule: exactly one root node (no parent). parent references another node's id (preferred) or label. For stable references that survive label renames, add id = "stable-key" to each node and use that in parent. To explicitly select the view: view = "org_chart".

Funnel — Conversion funnels, sales pipelines

Prompt: "Generate a Declart funnel for a 5-stage sales pipeline. Use kind = 'flow' and view = 'funnel'."

kind = "flow"
view = "funnel"
title = "Sales Pipeline"

[[items]]
label = "Leads"

[[items]]
label = "Qualified"

[[items]]
label = "Proposal"

[[items]]
label = "Negotiation"

[[items]]
label = "Closed Won"
emphasis = "primary"

Limit: 2–10 stages.

Comparison — Feature matrices, trade-off tables

Prompt: "Generate a Declart comparison table for three JavaScript frameworks across four criteria."

kind = "comparison"
title = "JavaScript Framework Comparison"

[[columns]]
label = "Performance"

[[columns]]
label = "Ecosystem"

[[rows]]
label = "React"
Performance = "★★★★"
Ecosystem = "★★★★★"

[[rows]]
label = "Vue"
Performance = "★★★★"
Ecosystem = "★★★"

[[rows]]
label = "Svelte"
Performance = "★★★★★"

Limits: 1–10 rows, 1–8 columns. Declare [[columns]] first for column order. Cell values are inline in each row, keyed by column label. Missing cells are rendered empty. Column label must not be "label" (reserved). Use TOML quoted keys ("My Column" = "val") if a column name contains spaces.

Tips for LLMs

Validating LLM Output

declart validate diagram.toml

Error messages include field names and hints:

invalid value `(missing)` for field `position`
  = hint: When any quadrant has position, all must specify it.
          Valid: top-left, top-right, bottom-left, bottom-right

Paste the error back to the LLM to get a corrected TOML.