Diagrams

BPMN Viewer

Quick start

Code

<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" id="Definities" targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn:process id="Leave" name="Leave request" isExecutable="false">
    <bpmn:startEvent id="Start" name="Request submitted">
      <bpmn:outgoing>f1</bpmn:outgoing>
    </bpmn:startEvent>
    <bpmn:userTask id="Review" name="Manager reviews">
      <bpmn:incoming>f1</bpmn:incoming>
      <bpmn:outgoing>f2</bpmn:outgoing>
    </bpmn:userTask>
    <bpmn:exclusiveGateway id="Approved" name="Approved?">
      <bpmn:incoming>f2</bpmn:incoming>
      <bpmn:outgoing>f3</bpmn:outgoing>
      <bpmn:outgoing>f4</bpmn:outgoing>
    </bpmn:exclusiveGateway>
    <bpmn:task id="Schedule" name="Schedule leave">
      <bpmn:incoming>f3</bpmn:incoming>
      <bpmn:outgoing>f5</bpmn:outgoing>
    </bpmn:task>
    <bpmn:task id="Explain" name="Explain rejection">
      <bpmn:incoming>f4</bpmn:incoming>
      <bpmn:outgoing>f6</bpmn:outgoing>
    </bpmn:task>
    <bpmn:endEvent id="End" name="Completed">
      <bpmn:incoming>f5</bpmn:incoming>
      <bpmn:incoming>f6</bpmn:incoming>
    </bpmn:endEvent>
    <bpmn:sequenceFlow id="f1" sourceRef="Start" targetRef="Review" />
    <bpmn:sequenceFlow id="f2" sourceRef="Review" targetRef="Approved" />
    <bpmn:sequenceFlow id="f3" sourceRef="Approved" targetRef="Schedule" name="yes" />
    <bpmn:sequenceFlow id="f4" sourceRef="Approved" targetRef="Explain" name="no" />
    <bpmn:sequenceFlow id="f5" sourceRef="Schedule" targetRef="End" />
    <bpmn:sequenceFlow id="f6" sourceRef="Explain" targetRef="End" />
  </bpmn:process>
</bpmn:definitions>

Diagram

The diagram is drawn in your browser. Your code is not stored unless you click "Share with preview" yourself.

BPMN XML is unreadable without a picture, and many files lack the layout a viewer needs. Paste your XML — if the layout is missing, we work one out and tell you so.

What people use this for

bpmn:startEvent — start of the process
bpmn:task / bpmn:userTask — a step
bpmn:exclusiveGateway — a choice or decision
bpmn:parallelGateway — steps running at the same time
bpmn:sequenceFlow — the arrow between two steps
bpmn:endEvent — end of the process

What others think of this tool

No reviews for this tool yet. Yours would be the first.

Frequently asked questions

Why does my BPMN file show an empty screen elsewhere?

BPMN has two parts: the process description and a separate section holding the position of every shape. Viewers draw only that second part. If it is missing, you see nothing. This tool detects that and works out a layout itself.

What if the layout is only partly there?

It happens: a file with shapes but no connections gives you loose boxes without arrows. We detect that too and draw the connections anyway. We always say so above the diagram.

I see boxes but no arrows. Why?

The file is missing the links between steps. BPMN records those with <incoming> and <outgoing> inside each step; sourceRef and targetRef on the sequence flow alone is not enough to derive the order. We say so when we cannot draw the arrows.

Is my process model stored?

No. Rendering happens entirely in your browser; your XML never reaches our server. Only when you click 'Share with preview' yourself do we store the model to create a shareable link.

Which BPMN version is supported?

BPMN 2.0, the Object Management Group standard. That is what modelling tools such as Camunda, Signavio and bpmn.io export.

Can I edit the diagram?

This tool views and exports; it is not an editor. To make changes, edit the XML on the left — the diagram updates as you type.