Open-source UML modeling editor for the web. Draw 13 UML and modeling diagram types (class, component, activity, BPMN, SFC, and more) in the browser, collaborate in real time, and export to SVG, PNG, PDF, PPTX, or JSON.

npm package · VS Code extension

Why Apollon

• Made for learning and teaching. Apollon powers the UML modeling exercises and grading workflows in Artemis, TUM's interactive learning platform, and holds up in large university courses — but it is a general-purpose editor that works just as well outside the classroom.
• Embeddable first. The editor is an npm library with an imperative API (plus a React component); the standalone web app and the VS Code extension in this repo are built on top of it. If you need diagramming inside your own product, you embed the exact editor you see in the demo.
• Framework-agnostic. One API works from Angular, Vue, Svelte, vanilla JS, or React.
• Real-time collaboration built in. Opt-in multi-user editing over Yjs, with any transport you like.
• MIT-licensed and self-hostable. No account, no cloud dependency — run the whole stack yourself.

What's in this repo

This monorepo contains every piece of the Apollon platform:

• library/: the embeddable @tumaet/apollon editor (npm).
• standalone/: the standalone web app (server and webapp) built on the library.
• vscode-extension/: the Apollon VS Code extension.
• docs/: the Docusaurus documentation site, published at https://ls1intum.github.io/Apollon/.

Use the library

npm install @tumaet/apollon

npm 7+, pnpm 8+, and Bun pull in the required peer dependencies automatically (react, react-dom, @xyflow/react, yjs, y-protocols) — the editor renders on the host's single React and Yjs instance instead of bundling its own. Yarn never installs peers, so list them in the install command there. See the library README for the full API and per-framework guides.

Run the stack locally

git clone git@github.com:ls1intum/Apollon.git
cd Apollon
nvm install && nvm use
pnpm install
pnpm dev

pnpm dev starts three processes together:

• Library build watch (auto-rebuilds on changes).
• Server (tsx watch) on a printed local HTTP port with a matching WebSocket relay port.
• Webapp (Vite HMR) on a printed local dev URL.

The launcher handles the setup:

• Resolves port collisions for the webapp, server, WebSocket relay, and Redis.
• Reuses an existing local Redis if one is running; otherwise it starts a Redis container on a free host port (Docker is only required in that case).
• Needs no .env files. The defaults match the local setup.

Override ports via APOLLON_WEBAPP_PORT, APOLLON_SERVER_PORT, APOLLON_WS_PORT, or APOLLON_REDIS_PORT.

To preview the documentation site instead, run pnpm dev:docs from the repo root. It builds the library and starts the Docusaurus dev server.

Tech stack

Component	Technology
Library	React, TypeScript, React Flow (@xyflow/react), Yjs, Zustand, Vite
Server	Hono 4, Redis (RedisJSON), WebSocket relay
Webapp	React, TypeScript, Vite, shadcn-style UI (Base UI), Tailwind
Storage	Redis with RedisJSON (diagrams expire after 120 days via native TTL)
Reverse proxy	Traefik v3 (production)

Requirements

• Node.js: version pinned in .nvmrc (Node 24 LTS).
• pnpm 11+: the package manager. The exact version is pinned in the packageManager field of package.json. Install it with npm install -g pnpm@11.
• Docker: only when pnpm dev needs to start a local Redis.

Documentation

The docs are a Docusaurus site published at https://ls1intum.github.io/Apollon/. Sources live in docs/; preview them locally with pnpm dev:docs.

• Library: embedding the @tumaet/apollon editor.
• User Guide: getting started, requirements, and self-hosting.
• Contributor: project structure, scripts, deployment, and troubleshooting.
• Support: getting help, and updating from the previous iPhone/iPad app.

Operations, legal pages, and TUM DSMS material live in ops/ in this repo.

Contributing

Open an issue or a pull request at https://github.com/ls1intum/Apollon. Guidelines live in CONTRIBUTING.md; see also the CODE_OF_CONDUCT.md.

License

MIT. See LICENSE.