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:
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 published library documentation
for the API and per-framework guides.
Run the stack locally
git clone [email protected]: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 12+: the package manager. The exact version is pinned in the
packageManager field of package.json. Install it with npm install -g pnpm@12.
- 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.
