BPMN Diagram Editor & Viewer
BPMN editor and viewer for VS Code, by Zovo. Click a .bpmn file and it opens as a diagram you can pan, zoom and edit: events, tasks, gateways, pools, lanes and message flows. Saving writes standard BPMN 2.0 XML and changes only the lines your edit touched, so Camunda, Zeebe and Flowable settings, comments and your own formatting stay as they were.
Free, offline, no account. Zovo Pro: USD 19 once, for this and every other Zovo extension. It adds a model check, a visual compare and SVG, PNG and PDF export, with 3 free tries of each. Everything free stays free.
A real VS Code window running this extension on samples/order-process.bpmn, the sample that ships with it.
Free
- Open any BPMN 2.0 file as a diagram:
.bpmn, .bpmn2 and .bpmn20.xml, from Camunda 7 and 8 (Zeebe), Flowable, Activiti and other modeling tools. Fit, zoom, and find an element by name or id.
- Edit with a palette: start, end and intermediate events, tasks, sub-processes, gateways, data objects, pools, lanes and message flows. Click an element for its menu: append the next step, change its type, connect, add a lane above or below, delete.
- Save safely. A rename changes one line; a moved task changes only its coordinates and the arrows that follow it. Vendor attributes and extension elements, XML comments, blank lines, indentation, attribute order and the namespace prefixes of the file stay byte for byte.
- A properties panel for the id, name, documentation and the condition of a flow, with the Camunda, Zeebe or Flowable settings of the selected element listed read-only.
- Keep the XML side by side. The XML button opens the same file as text. Type in the XML and the diagram redraws. Undo and redo are the ones of VS Code, so they work across both views.
- See clear errors. A file that is not valid XML shows the reason and the line, and the file is never touched.
Quick start
- Install BPMN Diagram Editor & Viewer.
- Click a
.bpmn file in the Explorer. No file at hand? Run "BPMN: Open the Sample Diagram" or "BPMN: New BPMN Diagram" from the Command Palette.
- Edit, then save with
Ctrl+S (Cmd+S on macOS). The tab shows the dot for unsaved changes like any text file, and nothing is written until you save.
How the save keeps your file
The diagram is drawn with bpmn-js, the open-source BPMN toolkit. When you edit, the extension compares the diagram before and after the edit and writes only the changed lines into your file, in the file's own prefixes and indentation. Before it writes, it checks the result: the file must differ by exactly what the edit changed, compared element by element and attribute by attribute.
- A file that the diagram model reads and writes back in full gets a full write when a line patch is not possible (for example a file with every element on one line).
- A file with content that the model would drop (an XML comment, an attribute with an unknown reference) gets a note above the diagram that lists it. Edits are still saved as line patches. If one cannot be, the edit is not saved and you can choose: open the XML, or save anyway after a list of exactly what would go.
We tried this on 4,333 real BPMN files from open-source projects and the BPMN interchange test suite: a rename plus a move was saved as a line patch in 4,112 files (95 %), as a checked full write in 167, and refused with an explanation in 32 (22 files could not be read or had nothing to edit). No edit was lost and no file changed outside the edit.
- Check the model: 16 rules, such as missing start or end events, flows after an exclusive gateway with no condition, disconnected elements, implicit splits and joins, unnamed activities, message flows inside one pool, elements with no shape and broken references. Problems go to the Problems panel and a Markdown report, with a JSON file for CI. Works on one diagram or a whole folder (right-click it).
- Compare versions: the file against git HEAD or against another
.bpmn file, side by side, with added, removed, changed and moved elements colored and a change list that jumps to each one.
- Export: SVG, PNG or PDF of the diagram (white paper, any editor theme), or a process document in Markdown or HTML with every pool, lane, task, gateway and flow, its documentation and its vendor settings.
Run them from the row above the diagram, from the Command Palette, or by right-clicking a .bpmn file. A try counts only when the tool produced its output.
Settings
bpmnEditor.canvasColors: auto follows the VS Code theme; light is white paper; dark is a dark canvas. Colors set in the file are always kept.bpmnEditor.showProperties: show or hide the properties panel.bpmnEditor.exportScale: pixel scale of PNG and PDF exports (1 to 4, default 2).bpmnEditor.showProTools: hide the Zovo Pro tools everywhere.
Limits
- Vendor settings (Camunda input and output mappings, Zeebe task definitions, Flowable listeners) are kept and listed, but are edited in the XML text, not in a form.
- Simulation, token play and process deployment are not part of this extension.
- Files from git history and other read-only places open as a viewer with no palette.
- The bpmn.io logo in the corner of the canvas is part of the bpmn-js license and stays visible.
Privacy
The extension makes no network calls of its own. Diagrams, fonts and icons all load from the extension itself. Optional links (rate, Zovo Pro, PayPal) open in your browser only when you click them.
Support Zovo
Zovo Pro: USD 19 once, every Zovo viewer. Get Zovo Pro on GitHub Sponsors to turn on the Pro tools in this extension and in the other Zovo extensions you use. The free features stay free.
Zovo extensions have no ads and no tracking. They are made by theluckystrike on GitHub. You can also support the work with no Pro:
Open a format request with a sample file, and I reply there whether it can be done. For USD 299 once, through this GitHub Sponsors tier, I add your file format or a missing feature to this extension, with tests, within 7 days.
- Graphviz Viewer & DOT Viewer (Live Preview) shows a live preview of DOT files and exports SVG or PNG.
- Mermaid Diagram Viewer & Mermaid Editor, Live Mermaid Preview (MMD, PNG/SVG, Offline) edits .mmd files and Mermaid blocks in Markdown with a live diagram preview.
- XMind Viewer & Mind Map Viewer (XMind 8, 2020+) opens XMind, FreeMind and OPML mind maps, with search and export.
- HTML Preview & HTML Viewer (Live, CSS and Images, Offline) previews HTML beside the editor with its CSS, JS and images.
- RST Preview & reStructuredText Preview (RST Viewer, No Python) previews reStructuredText with no Python and no Sphinx.
See all Zovo extensions on the Marketplace.
| |
