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.

Retrieve an example

Use the website, API, or MCP to get an example. The developer guide lists the supported endpoints and tools.

curl https://technicaldiagrams.com/api/diagrams/service-architecture/scene
curl 'https://technicaldiagrams.com/api/diagrams/service-architecture/svg?theme=paper&accent=green'

Import the downloaded scene JSON on its diagram page to change labels and geometry, then export the SVG. MCP clients can use get_diagram for scene data and render_diagram for an existing example with a selected theme and accent.

Exported SVGs include font fallbacks. Text widths can vary between machines, so recheck label fit where you embed the result.