Drawuml — PlantUML diagram editor

Edit PlantUML UML diagrams visually, in sync with your .puml file. Elements sit on a canvas, you connect and rename them by hand, and the PlantUML code is kept up to date. Edit the diagram and the code changes; edit the code and the diagram changes.

This is the Drawuml web editor, running inside VS Code on the files in your workspace. It draws the diagram itself: no PlantUML server, no Java, nothing to install besides this extension. It does not replace PlantUML's own renderer — it is an editor for the diagram kinds listed below.

Use it

1. Open a PlantUML file (.puml, .plantuml, .iuml, .pu or .wsd).
2. Click the Open Diagram Editor to the Side button in the editor's title bar, or run Drawuml: Open Diagram Editor from the Command Palette. You can also right-click the file in the Explorer.
3. Edit on either side. The text editor and the diagram follow each other as you type.

The file stays an ordinary PlantUML file. Save, undo, revert and source control all work the way they do for any other file: Ctrl+S saves it and Ctrl+Z undoes the last change, whichever side made it.

To open PlantUML files with Drawuml by default, add this to your settings:

"workbench.editorAssociations": { "*.puml": "drawuml.editor" }

The eight diagram kinds

Class, object, use case, component, deployment and state diagrams are arranged by you, or by auto layout. Sequence and activity diagrams are arranged by the editor from the order of the code.

The diagram can be exported as SVG, PNG or PDF.

Good to know

• The kind of diagram is read from the code, because PlantUML has no line that names it. A file that mixes two kinds, or that is another PlantUML diagram type (mind map, Gantt, JSON, …), is not opened as a diagram and is left untouched; fix it in the text editor and the diagram appears by itself. A text made only of names and arrows (Alice -> Bob : hello) is a sequence diagram, as it is for PlantUML. Component and deployment diagrams share most of their words, so a file that uses only the shared ones opens as a component diagram on a computer that has not edited it before.
• A new, empty file asks which kind of diagram to start. Nothing is written until your first edit.
• Moving elements never changes your file. Where the elements sit, how big the boxes are and whether auto layout is on is remembered for each file on this computer, in VS Code's storage for the extension (a copy of the diagram with its positions, for the 200 files edited most recently). It is not written into the PlantUML and is not shared through source control. Moving an element cannot be undone with Ctrl+Z. Dragging an element into or out of a package is different: the code says which package an element is in, so that is an edit. Sequence and activity diagrams have nothing to remember.
• A diagram edit rewrites the file in Drawuml's own formatting. PlantUML comments, your formatting and the order of the lines are not kept, and neither is anything outside the @startuml … @enduml block (a second diagram in the same file, for example). Lines the diagram does not show — skinparam, !theme, !include, title, hide — are kept exactly as written, at the top of the file. Drawuml asks before it rewrites a file it did not write, once per file. Edits you type in the text editor are never reformatted.
• !include and the preprocessor are not expanded: the diagram shows what is written in this file.
• The code Drawuml writes has not been checked against every PlantUML version. Render a diagram with PlantUML itself before you rely on it.

Privacy

Drawuml runs entirely inside VS Code. It makes no network requests, has no telemetry, and reads and writes only the file you open with it, the pictures you export, and the remembered layout described above. Nothing is sent to a PlantUML server. The editor's page is not allowed to contact any server. Privacy policy · Terms of service

Feedback

drawdiags.com/contact

Part of the Free Diagrams suite: Drawmaid (Mermaid), Drawuml (PlantUML), Drawtabase (SQL), Drawpenapi (OpenAPI) and Drawlize (JSON and YAML).