Customize and embed

Presentation settings apply to the full scene. Content and geometry live in the scene JSON. Keep both in a downloaded preset when you want to resume editing.

Presentation parameters

Developer-surface recipe pages start in the dark theme. Other recipe pages start light. The API’s shared defaults are light.

The diagram title sets the accessible SVG title. It does not replace visible heading text; change those labels under Edit labels & content. The description is editable in the scene JSON.

Content and geometry

Use the label editor for text-only changes. Edit individual elements provides fields for position, size, colors, labels, and line options. You can add, duplicate, or remove a primitive and undo the last element edit. Path shapes still use an SVG path string.

Open the JSON editor for whole-scene changes, canvas dimensions, and the accessible description. Apply validates first and preserves the current preview if validation fails.

The first release uses explicit coordinates. Increasing text size, adding long labels, moving nodes, or changing the canvas dimensions can cause collisions. Inspect the result after each structural change. Text edits have a 500-character limit per primitive, but a usable label is usually much shorter.

Chart scenes store geometry rather than original numeric datasets. When changing chart data, recompute the corresponding positions, widths, or arc paths and update the units and labels. The chart examples are illustrations, not a charting API.

Keep and share edits

Download JSON saves a preset with format, version, recipe, scene, and options. Import JSON accepts either that preset or a bare scene. You can import a preset on any recipe page; the review panel remains associated with the page’s recipe.

Copy preset link stores the preset in the URL fragment. It does not write the preset to a server. Link recipients can read the contents. Long presets should travel as JSON files; the editor refuses links longer than 64,000 characters.

The editor does not autosave content. Reset example offers Undo reset to recover the previous edits during the current visit. Download before navigating away.

Embed an exported SVG

<figure>
  <img
    src="/diagrams/service-architecture.svg"
    alt="The web client calls an API gateway, which writes to Postgres and publishes jobs to a queue."
    width="720"
    height="400"
    style="max-width: 100%; height: auto"
  />
  <figcaption>The request path and application boundary.</figcaption>
</figure>

Keep a useful alt attribute when embedding with an image element. The SVG’s internal title and description help inline embedding, but image-element accessibility relies on the image’s alt text.

For narrow screens, simplify the diagram or provide a scrollable full-size view. Shrinking a dense diagram until its labels are unreadable is not a responsive layout strategy.

Use the renderer in source

The library is not published to npm. In this repository, import the TypeScript renderer:

import { parseScene, renderSVG } from './src/lib/scene';

const scene = parseScene(jsonText);
const svg = renderSVG(scene, {
  theme: 'paper',
  accent: 'green',
  radius: 4,
});

Validate untrusted scene input with parseScene first. renderSVG expects trusted, typed options. Supply a unique third argument when embedding multiple SVGs on the same HTML page so marker and accessibility IDs do not collide.

The website uses self-hosted Hanken Grotesk and IBM Plex Mono. Exported SVGs use system font stacks for portability, so text metrics can vary across machines. Recheck line lengths in the target environment.