Embeddable UML modeling editor for VS Code. Create, edit, and export UML diagrams (class, component, activity, BPMN, and more) directly inside your editor.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Model UML diagrams directly in Visual Studio Code using the Apollon editor. Diagrams are stored as .apollon files so you can version them in Git alongside your source.
Install
Marketplace: search for Apollon in the Extensions view, or install aet-tum.apollon-extension from the VS Code Marketplace.
Run Apollon: New Diagram from the Command Palette, or press + in the Apollon view in the Activity Bar.
Open any .apollon file to edit it on the canvas. It behaves like any other editor: Cmd/Ctrl+S saves, the tab shows unsaved changes, and Cmd/Ctrl+Z undoes.
To read or diff the raw JSON, use Reopen Editor With… → Text Editor.
Supported diagram types match the @tumaet/apollon library: class, object, activity, use case, communication, component, deployment, Petri net, reachability graph, syntax tree, flowchart, BPMN, and sequential function chart.
Export
Run Apollon: Export Diagram as Image to write a sibling .svg or .png next to the diagram. To do it on every save, set apollon.autoExport to svg or png.