UML Diagrams,
Instantly in Your Browser

Create beautiful, precise sequence and component diagrams using a simple text syntax. No servers, no latency, just pure client-side rendering.

Try it Live View Examples
⚡

Blazing Fast

Renders instantly in your browser. No server round-trips means zero latency as you type.

✨

Modern Aesthetics

Generates crisp, publication-quality SVGs with precise alignment and beautiful styling.

📄

Markdown Friendly

Pairs perfectly with Markdown. Write diagrams as code for documentation that's versioned, searchable, and easy to maintain.

Interactive Playground

Edits render automatically
Input Source
Live Preview

📘 Getting Started

Getting Started

Download the SeedUML library and include it in your project. 

<script src="dist/seeduml.min.js"></script>

Once loaded, the window.seeduml global object becomes available.

🚀 Manual Rendering

Use render() to manually convert diagram code to SVG. This function automatically detects the diagram type (Sequence or Component). 

const code = 'Alice -> Bob: Hello'; // or component diagram code
const svg = seeduml.render(code);

// Insert into DOM
document.getElementById('output').innerHTML = svg;

Parameters:

• content: SeedUML-format diagram code

Returns:

SVG string. On error, returns styled error SVG (no exceptions thrown).

🔄 Auto-Rendering

Call initialize() to auto-detect and render all diagram blocks. Similar to Mermaid. 

seeduml.initialize({
  startOnLoad: true,
  selector: 'pre.seeduml'
});

// Or use defaults:
seeduml.initialize();

Config Options:

• startOnLoad: Auto-render on page load (default: true)

• selector: CSS selector (default: 'pre.seeduml')

Note:

Finds all matching elements, extracts text content, and replaces with SVG diagrams.

📄 HTML Usage Example

Code:

<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Diagrams</h1>

    <h2>Example 1</h2>
    <pre class="seeduml">
Alice -> Bob: Hello!
Bob -> Alice: Hi!
    </pre>

    <h2>Example 2</h2>
    <pre class="seeduml">
participant C
participant S

C -> S: Request
S -> C: Response
    </pre>

    <script src="dist/seeduml.min.js"></script>
    <script>
      seeduml.initialize();
    </script>
  </body>
</html>

Rendered Output:

Example 1

Alice -> Bob: Hello!
Bob -> Alice: Hi!

Example 2

participant C
participant S

C -> S: Request
S -> C: Response