UML modeling editor for the web

Try it live

The @tumaet/apollon package running in your browser. The snippet beside it is the code that mounts it — switch frameworks in the tabs.

React
Angular
Vanilla JS

Diagram.tsx
import { Apollon } from "@tumaet/apollon/react"
import type { UMLModel } from "@tumaet/apollon"
import "@tumaet/apollon/style.css"

export function Diagram({ initialModel }: { initialModel?: UMLModel }) {
  return (
    <Apollon
      style={{ height: 600 }}
      defaultModel={initialModel}
      onMount={(editor) => {
        const id = editor.subscribeToModelChange((model) => {
          localStorage.setItem("diagram", JSON.stringify(model))
        })
        return () => editor.unsubscribe(id)
      }}
    />
  )
}

diagram.component.ts
import {
  Component,
  DestroyRef,
  ElementRef,
  afterNextRender,
  inject,
  input,
  viewChild,
} from "@angular/core"
import { ApollonEditor, type UMLModel } from "@tumaet/apollon"
import "@tumaet/apollon/style.css"

@Component({
  selector: "app-diagram",
  template: `<div #host style="height: 600px"></div>`,
})
export class DiagramComponent {
  readonly initialModel = input<UMLModel>()
  private host = viewChild.required<ElementRef<HTMLDivElement>>("host")

  constructor() {
    const destroyRef = inject(DestroyRef)
    afterNextRender(() => {
      const editor = new ApollonEditor(this.host().nativeElement, {
        model: this.initialModel(),
      })
      const subId = editor.subscribeToModelChange((model) => {
        localStorage.setItem("diagram", JSON.stringify(model))
      })
      destroyRef.onDestroy(() => {
        editor.unsubscribe(subId)
        editor.destroy()
      })
    })
  }
}

index.html
<link
  rel="stylesheet"
  href="https://esm.sh/@tumaet/apollon@4.4.0/style.css"
/>
<div id="apollon" style="width: 100%; height: 600px"></div>

<script type="module">
  import { ApollonEditor } from "https://esm.sh/@tumaet/apollon@4.4.0"

  const saved = localStorage.getItem("diagram")
  const editor = new ApollonEditor(document.getElementById("apollon"), {
    model: saved ? JSON.parse(saved) : undefined,
  })

  editor.subscribeToModelChange((model) => {
    localStorage.setItem("diagram", JSON.stringify(model))
  })

  // editor.destroy() when you're done.
</script>

LIVE@tumaet/apollon

Loading Apollon…

Edits stay local — refresh to reset.

Three ways to use Apollon

Same editor, same diagram format — only the delivery differs.

Library

Embed it

@tumaet/apollon on npm. Framework-agnostic by default; Angular hosts install zero peer deps. A /react subpath dedupes React when the host already has it.

Embedding guide →Standalone

Host the web app

A full diagram editor with sharing and real-time collaboration. Use the hosted instance or run your own with Docker.

User guide →VS Code

Edit next to your code

The Apollon extension stores diagrams as .apollon files in your repository — versioned and reviewed alongside the code.

Install the extension →

What you get

Modeling

13 diagram types

Class, Object, Activity, Use Case, Communication, Component, Deployment, Petri Net, Reachability Graph, Syntax Tree, Flowchart, BPMN, and SFC.

Output

Export anywhere

SVG, PNG, PDF, and JSON — from a mounted editor or a headless model. Round-trips through JSON without loss.

Collaboration

Real-time, opt-in

Multi-user editing via Yjs over any transport you already run — WebSocket, WebRTC, or BroadcastChannel.

Draw UML diagrams in the browser.