Skip to content

Docs/bpmn diagram viewer component issue 56 #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
a-m-zill merged 6 commits into from
Dec 3, 2025
Merged

Docs/bpmn diagram viewer component issue 56 #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eaa7995
install dependencies
sgort Nov 28, 2025
ca94a25
add React component and Remark plugin
sgort Nov 28, 2025
bf6d265
Updated config with plugins
sgort Nov 28, 2025
f64db56
script to fix <div ../ references into ./
sgort Nov 28, 2025
419869a
log dry run fix script
sgort Nov 28, 2025
cd30670
live run fix script
sgort Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/documentation/reference/bpmn20/events/cancel-and-compensation-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ Triggering compensation: Compensation can either be triggered for a designated a

Note: If compensation is thrown within a scope which contains a subprocess and the subprocess contains activities with compensation handlers, compensation is only propagated to the subprocess if it has completed successfully when compensation is thrown. If some of the activities nested inside the subprocess have completed and have attached compensation handlers, the compensation handlers are not executed if the subprocess containing these activities is not completed yet. Consider the following example:

<div data-bpmn-diagram="../bpmn/compensation-intermediate-throw-event"></div>
<div data-bpmn-diagram="./bpmn/compensation-intermediate-throw-event"></div>

In this process we have two concurrent executions, one executing the embedded subprocess and one executing the "charge credit card" activity. Lets assume both executions are started and the first concurrent execution is waiting for a user to complete the "review bookings" task. The second execution performs the "charge credit card" activity and an error is thrown, which causes the "cancel reservations" event to trigger compensation. At this point the parallel subprocess is not yet completed which means that the compensation event is not propagated to the subprocess and thus the "cancel hotel reservation" compensation handler is not executed. If the user task (and thus the embedded subprocess) completes before the "cancel reservations" is performed, compensation is propagated to the embedded subprocess.

Expand Down Expand Up @@ -166,7 +166,7 @@ A compensation event subprocess can be used as a compensation handler for the em

Contrary to a compensation boundary event attached to a subprocess, a compensation event subprocess *consumes* a thrown compensation event. That means, activities contained in the subprocess are not compensated by default. Instead, the compensation event subprocess can recursively trigger compensation for activities contained in its parent.

<div data-bpmn-diagram="../bpmn/compensation-event-subprocess"></div>
<div data-bpmn-diagram="./bpmn/compensation-event-subprocess"></div>

The above process contains an embedded subprocess with a compensation event subprocess, triggered by a compensation start event. Note that this compensation handler deviates from default compensation in that it triggers compensation activities in an specific order independent from the order of execution; it also contains an additional activity adding process logic that cannot be derived from the body of the subprocess itself.

Expand Down
6 changes: 3 additions & 3 deletions docs/documentation/reference/bpmn20/events/conditional-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ are evaluated. This behavior is called *triggering on scope instantiation*.

Consider the following process model:

<div data-bpmn-diagram="../bpmn/event-conditional2" ></div>
<div data-bpmn-diagram="./bpmn/event-conditional2" ></div>

When a process instance is started, i.e., the process definition scope is instantiated, the condition of the sub process is evaluated before the none start
event is executed. If fulfilled, it triggers immediately and the none start event never executes. The same applies to activities with conditional boundary events and intermediate conditional events.
Expand Down Expand Up @@ -218,7 +218,7 @@ That means the evaluation starts at the the conditional events of the BPMN scope

For example see the following BPMN process model:

<div data-bpmn-diagram="../bpmn/conditionalEventScopesHighestFirst" ></div>
<div data-bpmn-diagram="./bpmn/conditionalEventScopesHighestFirst" ></div>

If a variable is set in the context of the sub process instance, then the conditional boundary event of the sub process is evaluated first.
If the condition is satisfied, then the execution is interrupted, otherwise the conditional boundary event of `UserTask B` is evaluated and
Expand All @@ -231,7 +231,7 @@ That means if a variable changes, only those conditional events are evaluated th

See the following BPMN process model:

<div data-bpmn-diagram="../bpmn/conditionalEventScopes" ></div>
<div data-bpmn-diagram="./bpmn/conditionalEventScopes" ></div>

If we have started the process above and `UserTask B` and `UserTask A` are active, then the [activity instance](../../../user-guide/process-engine/process-engine-concepts.md#activity-instances) hierarchy is:

Expand Down
8 changes: 4 additions & 4 deletions docs/documentation/reference/bpmn20/events/error-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ menu:

Error events are events which are triggered by a defined error.

<div data-bpmn-diagram="../bpmn/event-error"></div>
<div data-bpmn-diagram="./bpmn/event-error"></div>


## Business Errors vs. Technical Errors
Expand Down Expand Up @@ -99,7 +99,7 @@ For External Tasks, it is also possible to define error events by using a [opera

An error start event can only be used to trigger an Event Sub-Process - it __cannot__ be used to start a process instance. The error start event is always interrupting.

<div data-bpmn-diagram="../bpmn/event-subprocess-alternative1"></div>
<div data-bpmn-diagram="./bpmn/event-subprocess-alternative1"></div>

Three optional attributes can be added to the error start event: <code>errorRef</code>, <code>operaton:errorCodeVariable</code> and <code>operaton:errorMessageVariable</code>:
```xml
Expand Down Expand Up @@ -186,7 +186,7 @@ Defining a error boundary event makes most sense on an embedded subprocess, or a

When an error event is caught, the activity on which the boundary event is defined is destroyed, also destroying all current executions therein (e.g., concurrent activities, nested subprocesses, etc.). Process execution continues following the outgoing sequence flow of the boundary event.

<div data-bpmn-diagram="../bpmn/event-subprocess-alternative2"></div>
<div data-bpmn-diagram="./bpmn/event-subprocess-alternative2"></div>

A error boundary event is defined as a typical boundary event. As with the other error events, the errorRef references an error defined outside of the process element:

Expand Down Expand Up @@ -226,7 +226,7 @@ This behaviour can be changed with <code>enableExceptionsAfterUnhandledBpmnError

An error can be handled by the error start event in the event sub process and the same error can be thrown from the event sub process to handle the error on the higher level scope (in the example below, the error thrown from the Event Subprocess is handled by the error boundary event in the Subprocess).

<div data-bpmn-diagram="../bpmn/catchandthrowpattern"></div>
<div data-bpmn-diagram="./bpmn/catchandthrowpattern"></div>

### Additional Resources

Expand Down
10 changes: 5 additions & 5 deletions docs/documentation/reference/bpmn20/events/escalation-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ menu:

Escalation events are events which reference a named escalation. They are mostly used to communicate from a subprocess to an upper process. Unlike an error, an escalation event is non critical and execution continues at the location of throwing.

<div data-bpmn-diagram="../bpmn/escalation-example"></div>
<div data-bpmn-diagram="./bpmn/escalation-example"></div>


## Defining Escalation
Expand Down Expand Up @@ -40,7 +40,7 @@ An escalation event definition is declared by using the `escalationEventDefiniti

An escalation start event can only be used to trigger an event sub-process - it __cannot__ be used to start a process instance.

<div data-bpmn-diagram="../bpmn/escalation-start-event"></div>
<div data-bpmn-diagram="./bpmn/escalation-start-event"></div>

An event sub-process with an escalation start event is triggered by an escalation event that occurs in the same scope or in a lower scope (e.g., sub-process or call activity). When the sub-process is triggered by an escalation event from a call activity, then the defined output variables of the call activity are passed to the sub-process.

Expand Down Expand Up @@ -89,7 +89,7 @@ The following extensions are supported for `escalationEventDefinition`.

An intermediate catching escalation event on the boundary of an activity, or escalation boundary event for short, catches escalations that are thrown within the scope of the activity on which it is defined.

<div data-bpmn-diagram="../bpmn/escalation-boundary-event"></div>
<div data-bpmn-diagram="./bpmn/escalation-boundary-event"></div>

An escalation boundary event can only attached on an embedded sub-process or a call activity, since an escalation can only be thrown by an escalation intermediate throw event or an escalation end event. When the boundary event is triggered by an escalation event from a call activity, then the defined output variables of the call activity are passed to the scope of the boundary event.

Expand Down Expand Up @@ -134,7 +134,7 @@ The following extensions are supported for `escalationEventDefinition`.

When process execution arrives at an escalation intermediate throw event, a named escalation is thrown. This escalation can be caught by an escalation boundary event or an event sub-process with an escalation start event which has the same or none escalation code.

<div data-bpmn-diagram="../bpmn/escalation-intermediate-throw-event"></div>
<div data-bpmn-diagram="./bpmn/escalation-intermediate-throw-event"></div>

Like an error event, an escalation event is propagated to upper scopes (e.g., from sub-process or call activity) till it is caught. In case no boundary event or event sub-process caught the event, the execution just continues with normal flow. If the escalation is propagated to an upper scope via call activity then the defined output variables of the call activity are passed to the upper scope.

Expand All @@ -148,7 +148,7 @@ Like an error event, an escalation event is propagated to upper scopes (e.g., fr

When process execution arrives at an escalation end event, the current path of execution is ended and a named escalation is thrown. It has the same behavior as an [escalation intermediate throw event](#escalation-intermediate-throw-event).

<div data-bpmn-diagram="../bpmn/escalation-end-event"></div>
<div data-bpmn-diagram="./bpmn/escalation-end-event"></div>

```xml
<endEvent id="throwEscalation" name="late shipment">
Expand Down
2 changes: 1 addition & 1 deletion docs/documentation/reference/bpmn20/events/link-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Link events are a special case - it has no special execution semantics but serve
in the same process model (to be precise: in the same sub process). Hence you can use two matching links as an
alternative to a sequence flow as shown in the following example.

<div data-bpmn-diagram="../bpmn/event-link"></div>
<div data-bpmn-diagram="./bpmn/event-link"></div>

Note that you might have the same event source (throwing intermediate link event with the same event definition name) multiple times, but the event target (catching intermediate link event) has to be unique according to the BPMN 2.0 specification.

Expand Down
6 changes: 3 additions & 3 deletions docs/documentation/reference/bpmn20/events/message-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ The XML representation of a message start event is the normal start event declar

A process can be started using one of two different messages, this is useful if the process needs alternative ways to react to different start events but eventually continues in a uniform way.

<div data-bpmn-diagram="../bpmn/event-message-start-alternative" > </div>
<div data-bpmn-diagram="./bpmn/event-message-start-alternative" > </div>


## Message Intermediate Catching Event
Expand All @@ -284,7 +284,7 @@ When a token arrives at the message intermediate catching event it will wait the

The following example shows different message events in a process model:

<div data-bpmn-diagram="../bpmn/event-message"></div>
<div data-bpmn-diagram="./bpmn/event-message"></div>

```xml
<intermediateCatchEvent id="message">
Expand All @@ -307,7 +307,7 @@ Boundary events are catching events that are attached to an activity. This means

A Message Intermediate Throwing event sends a message to an external service. This event has the same behavior as a [Service Task](../tasks/service-task.md).

<div data-bpmn-diagram="../bpmn/event-message-throwing" > </div>
<div data-bpmn-diagram="./bpmn/event-message-throwing" > </div>

```xml
<intermediateThrowEvent id="message">
Expand Down
4 changes: 2 additions & 2 deletions docs/documentation/reference/bpmn20/events/none-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ ProcessInstance processInstance = runtimeService.startProcessInstanceByKey('invo

Note: a subprocess must always have a none start event.

<div data-bpmn-diagram="../bpmn/event-none"></div>
<div data-bpmn-diagram="./bpmn/event-none"></div>


## None End Event
Expand All @@ -33,7 +33,7 @@ A 'none' end event means that the result thrown when the event is reached is uns

The following process diagram shows a simple example of an intermediate none event, which is often used to indicate some state achieved in the process.

<div data-bpmn-diagram="../bpmn/event-none-intermediate" ></div>
<div data-bpmn-diagram="./bpmn/event-none-intermediate" ></div>


This can be a good hook to monitor some KPI's, basically by adding an execution listener
Expand Down
4 changes: 2 additions & 2 deletions docs/documentation/reference/bpmn20/events/signal-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ Signal events are events which reference a named signal. A signal is an event of

The following is an example of two separate processes communicating using signals. The first process is started if an insurance policy is updated or changed. After the changes have been reviewed by a human participant, a signal event is thrown, signaling that a policy has changed:

<div data-bpmn-diagram="../bpmn/event-signal-throwing"></div>
<div data-bpmn-diagram="./bpmn/event-signal-throwing"></div>

This event can now be caught by all process instances which are interested. The following is an example of a process subscribing to the event.

<div data-bpmn-diagram="../bpmn/event-signal-catching"></div>
<div data-bpmn-diagram="./bpmn/event-signal-catching"></div>

Note: It is important to understand that a signal event is broadcast to all active handlers. In the example given above this means that all instances of the process catching the signal would receive the event.

Expand Down
2 changes: 1 addition & 1 deletion docs/documentation/reference/bpmn20/events/terminate-event.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ It is useful if you have a parallel token flow in a process and you want to cons

A terminate event on process instance level terminates the complete instance. On subprocess level the current scope and all contained processes instances will be terminated.

<div data-bpmn-diagram="../bpmn/event-terminate"></div>
<div data-bpmn-diagram="./bpmn/event-terminate"></div>


## Terminate Event Definition
Expand Down
2 changes: 1 addition & 1 deletion docs/documentation/reference/bpmn20/events/timer-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ menu:

Timer events are events which are triggered by a defined timer. They can be used as start event, intermediate event or boundary event. Boundary events can be interrupting or not.

<div data-bpmn-diagram="../bpmn/event-timer" ></div>
<div data-bpmn-diagram="./bpmn/event-timer" ></div>


## Configuration
Expand Down
2 changes: 1 addition & 1 deletion docs/documentation/reference/bpmn20/gateways/event-based-gateway.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Note that the sequence flows running out of an event-based Gateway are different

The following process is an example of a process with an event-based Gateway. When the execution arrives at the event-based Gateway, process execution is suspended. Additionally, the process instance subscribes to the alert signal event and creates a timer which fires after 10 minutes. This effectively causes the process engine to wait for ten minutes for a signal event. If the signal event occurs within 10 minutes, the timer is canceled and execution continues after the signal. If the signal is not fired, execution continues after the timer and the signal subscription is canceled.

<div data-bpmn-diagram="../bpmn/event-based-gateway"></div>
<div data-bpmn-diagram="./bpmn/event-based-gateway"></div>

The corresponding xml looks like this:

Expand Down
2 changes: 1 addition & 1 deletion docs/documentation/reference/bpmn20/gateways/exclusive-gateway.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Note that only one sequence flow is selected when using the exclusive gateway. I
If no sequence flow can be selected (no condition evaluates to 'true') this will result in a runtime exception, unless you have a default flow defined. One default flow can be set on the gateway itself in case no other condition matches - like an 'else' in programming languages.


<div data-bpmn-diagram="../bpmn/exclusive-gateway"></div>
<div data-bpmn-diagram="./bpmn/exclusive-gateway"></div>


Note that a gateway without an icon inside it defaults to an exclusive gateway, even if we recommend to use the X within the gateway if your BPMN tool gives you that option.
Expand Down
10 changes: 5 additions & 5 deletions docs/documentation/reference/bpmn20/gateways/inclusive-gateway.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ The functionality of the inclusive gateway is based on the incoming and outgoing

Note that an inclusive gateway can have both _fork_ and _join_ behavior, if there are multiple incoming and outgoing sequence flows for the same inclusive gateway. In that case, the gateway will first join all incoming sequence flows that have a process token, before splitting into multiple concurrent paths of executions for the outgoing sequence flows that have a condition that evaluates to 'true'.

<div data-bpmn-diagram="../bpmn/inclusive-gateway"></div>
<div data-bpmn-diagram="./bpmn/inclusive-gateway"></div>

Defining an inclusive gateway needs one line of XML:

Expand Down Expand Up @@ -104,20 +104,20 @@ The following examples show under which conditions an inclusive gateway will tri
only two sequence flows join in the inclusive gateway. In this scenario, the inclusive
gateway **will trigger** even with only two tokens since the tokens from `Task 1` and `Task 2`
were joined in a single token by `Parallel Gateway 2`.
<div data-bpmn-diagram="../bpmn/inclusive_gateway_scenario_1"></div>
<div data-bpmn-diagram="./bpmn/inclusive_gateway_scenario_1"></div>

1. In this scenario, `Parallel Gateway 1` creates two execution tokens, and
three sequence flows join in the inclusive gateway. In this scenario, the inclusive
gateway **will trigger** with three tokens since `Parallel Gateway 2` splits the single
token from `Task 1` into two separate tokens for `Task 3` and `Task 4`.
<div data-bpmn-diagram="../bpmn/inclusive_gateway_scenario_2"></div>
<div data-bpmn-diagram="./bpmn/inclusive_gateway_scenario_2"></div>

1. In the diagram below, the parallel gateway creates two execution tokens. The first
execution token will wait at `User Task 1`, and the second will reach the
`Inclusive Gateway`. The `Inclusive Gateway` will trigger immediately for the first token,
and a second time, for the second token, as both tokens arrive on the same sequence flow.
As a result, there will be two instances of `User Task 2` that will need to be completed.
<div data-bpmn-diagram="../bpmn/inclusive_gateway_scenario_3"></div>
<div data-bpmn-diagram="./bpmn/inclusive_gateway_scenario_3"></div>

1. In the last scenario, the parallel gateway creates two execution tokens. The first
execution token will wait at `User Task 1`, and the second will reach the
Expand All @@ -129,7 +129,7 @@ The following examples show under which conditions an inclusive gateway will tri
behavior, only one instance of `User Task 2` will need to be completed instead of the expected two.
In cases like this one, it is recommended to use an [`Exclusive Gateway`](../gateways/exclusive-gateway.md)
instead of the `Inclusive Gateway 1`.
<div data-bpmn-diagram="../bpmn/inclusive_gateway_scenario_4"></div>
<div data-bpmn-diagram="./bpmn/inclusive_gateway_scenario_4"></div>

## Operaton Extensions

Expand Down
4 changes: 2 additions & 2 deletions docs/documentation/reference/bpmn20/gateways/parallel-gateway.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ menu:

Gateways can also be used to model concurrency in a process. The most straightforward gateway to introduce concurrency in a process model is the Parallel Gateway, which allows forking into multiple paths of execution or joining multiple incoming paths of execution.

<div data-bpmn-diagram="../bpmn/parallel-gateway"></div>
<div data-bpmn-diagram="./bpmn/parallel-gateway"></div>

The functionality of the parallel gateway is based on the incoming and outgoing sequence flow(s):

Expand Down Expand Up @@ -84,7 +84,7 @@ When these two tasks are completed, the second parallel gateway joins the two ex

Note that a parallel gateway does not need to be 'balanced' (i.e., a matching number of incoming/outgoing sequence flows for corresponding parallel gateways). A parallel gateway will simply wait for all incoming sequence flows and create a concurrent path of execution for each outgoing sequence flow, not influenced by other constructs in the process model. So, the following process is legal in BPMN 2.0:

<div data-bpmn-diagram="../bpmn/parallel-gateway-unbalanced"></div>
<div data-bpmn-diagram="./bpmn/parallel-gateway-unbalanced"></div>


## Operaton Extensions
Expand Down
Loading