BPMN Viewer & Inspector

about this tool

Open a .bpmn file, see the process, and get told what is wrong with it.

The file already knows where everything goes

This is the part that makes a viewer possible without a layout engine. A BPMN file has two halves: the process, which says what the elements are and how they connect, and the BPMNDiagram, which says where each one sits — an x, a y, a width and a height for every shape, and the waypoints every connection runs through.

So drawing it is not a layout problem, which is the hard part. It is reading coordinates that are already there and putting the right glyph at each one.

If a file has no BPMNDiagram section, it cannot be drawn — by this or by anything else — without running an auto-layout and inventing a picture the file never held. That is reported rather than approximated.

Why it does not use bpmn-js

bpmn-js is the reference implementation and it is very good. Two reasons it is not here:

Its licence requires the bpmn.io watermark to stay visible on any page that renders a diagram, and it must not be overlapped. That is a fair condition for a free library and it is not something to add to somebody's site as a side effect of opening a file.

And it is 5.3 MB, for a page that reads coordinates out of XML.

The shapes are the standard's

A task is a rounded rectangle. A gateway is a diamond, with the symbol inside it saying which kind — X exclusive, + parallel, O inclusive — because the diamond alone does not. A start event is a thin circle, an end event a thick one, an intermediate event a double one. A pool is a band with its name written up the edge. Message flows are dashed; sequence flows are not.

An element type this has no shape for is drawn as a dashed box with its type written on it, at exactly the position and size the file gives, and named underneath the diagram. That is more honest than leaving it out and more useful than guessing at a symbol.

What it tells you about the model

Problems: no start event, no end event, a sequence flow missing a source or a target, a task nothing leads to, a task nothing leaves.

Notes, kept separate because they are habits rather than faults: gateways with no label — so the question being asked at the split is not written down anywhere — and unnamed tasks.

Plus an inventory of every element by type, which is the quickest way to see that a process has thirty service tasks and one user task in it.

SVG out

The diagram downloads as SVG, so it stays sharp at any size and goes straight into a document or a slide. The labels in it are escaped on the way out, so a name containing markup stays a name.

Nothing is uploaded

A process model is usually an internal document describing how a company works, which is not something to hand to a website that offers to draw it for you.

For diagrams written as text rather than modelled, Mermaid editor renders those, and SVG optimizer will shrink whatever comes out of here.

questions

How do I open a .bpmn file without installing a modeller?

Drop it here. A BPMN file carries its own layout, so the diagram is drawn from the coordinates already in the file and nothing is uploaded or laid out automatically.

Why does my file show no diagram?

Because it has no BPMNDiagram section. That part holds the position of every shape, and a file without it describes the process but not how to draw it. No viewer can render that without running an auto-layout, which would invent a picture the file never contained.

Does it work with files from Camunda or Signavio?

Yes. Elements are matched on their local name, so it does not matter whether the file uses bpmn:, semantic: or no namespace prefix at all.

What problems does it find?

A missing start or end event, a sequence flow with no source or target, a task nothing leads to, and one nothing leaves. Unlabelled gateways and tasks are noted separately, since those are habits rather than broken files.

Can I get the diagram as an image?

Yes — download it as SVG, which stays sharp at any size and can be dropped straight into a document or a slide.