Embed SeedUML in your site

Quick start

Add the script and call SeedUML.render(). It returns a Promise<string> containing an SVG.

<script defer src="https://seeduml.dev/seeduml.bundle.min.js"></script>

<div id="diagram"></div>

<script>
  window.addEventListener('load', async () => {
    const svg = await SeedUML.render(`
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
@enduml
    `);
    // Parse to a DOM node rather than assigning innerHTML, so a
    // hypothetical hostile payload can't execute on your origin.
    const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
    document.getElementById('diagram').replaceChildren(doc.documentElement);
  });
</script>

Why defer and load? The bundle is ~2 MB (mostly the Graphviz layout engine, asm.js). defer keeps it from blocking your page render; waiting for load guarantees window.SeedUML is defined. render() is async because the layout engine initializes lazily on first use.

PlantUML example

Source:

@startuml
actor User
User -> Web: GET /login
Web -> Auth: validate(token)
Auth --> Web: ok
Web --> User: 200 OK
@enduml

Rendered live on this page:

Loading renderer…

Mermaid example

SeedUML auto-detects Mermaid by its header keyword — same render() call.

flowchart LR
  A[Start] --> B{Valid?}
  B --> C[Process]
  B --> D[Reject]
  C --> E[Done]

Loading renderer…

Public API

These are the stable entry points on the global window.SeedUML object. Anything not listed here (including window.SeedUML._internal.*) is implementation detail and may change without notice.

Member	Signature	Description
`render`	`(source, config?) => Promise<string>`	Auto-detects diagram type (16 PlantUML/Mermaid types) and returns an SVG string. Throws on parse/limit errors.
`detectDiagramType`	`(source) => string`	Returns the detected type, e.g. `"sequence"`, `"mermaid-flowchart"`. Useful for routing or UI badges.
`anonymize`	`(source) => { anonymized, mapping }`	Replaces identifiers with neutral placeholders for safe sharing/bug reports.
`DEFAULT_CONFIG`	`object`	The default theming/config object. Pass a partial override as the second argument to `render()`.

Version pinning & integrity

The https://seeduml.dev/seeduml.bundle.min.js URL always serves the latest build. For reproducible embeds, pin a version via jsDelivr (npm package @seeduml/seeduml-renderer):

<script defer
  src="https://cdn.jsdelivr.net/npm/@seeduml/seeduml-renderer@0.1.0/dist/seeduml.bundle.min.js"
  integrity="sha384-QjoanzAHrNx+J6ZfKSEyOawSB0FBw1Z/gMWRI/MsBZoyR609gn6N3b8MavHTfzae"
  crossorigin="anonymous"></script>

A branded version-pinned mirror is also published at https://seeduml.dev/v0.1.0/seeduml.bundle.min.js. SRI hashes for each release are listed in the CHANGELOG.

Full vs Lite bundle

The Graphviz layout engine (viz.js asm.js) is ~90% of the full bundle. If you only need the diagram types that don't require graph layout, the lite bundle is ~10× smaller. It exposes the identical API and throws a clear error for any type it can't render.

	Full	Lite
File	`seeduml.bundle.min.js`	`seeduml.lite.bundle.min.js`
Size (minified)	~2.2 MB	~210 KB
Supported types	All 16 (PlantUML + Mermaid)	PlantUML sequence & activity; Mermaid sequence, pie, gantt
Needs viz.js	Yes (bundled)	No

Types that require graph layout — class, object, component, use case, state, flowchart, ER, mindmap — are not in the lite bundle; calling render() on them throws an actionable error telling you to use the full bundle.

<script defer src="https://seeduml.dev/seeduml.lite.bundle.min.js"></script>

Limitations

Bundle size — ~2 MB minified for the full bundle (the Graphviz asm.js layout engine dominates). Always load with defer. Use the ~210 KB lite bundle (above) when you only need sequence/activity/pie/gantt.
Best-effort hosting — seeduml.dev has no uptime SLA. For production, pin via jsDelivr or self-host the bundle.
Latest semantics — the unversioned URL can change between releases. Pin a version if you need stability.
Client-side only — this is a browser library. There is no hosted "POST source, get SVG" endpoint.

Self-hosting

Download seeduml.bundle.min.js and serve it from your own origin. The API is identical — only the src changes. The renderer needs no network access at runtime; everything stays in the browser.