<!--
Copyright 2020 Bonitasoft S.A.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>bpmn-visualization examples</title>
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
<link rel="stylesheet" href="static/css/spectre.min.css" type="text/css">
<link rel="stylesheet" href="static/css/icons.min.css" type="text/css">
<link rel="stylesheet" href="static/css/main.css" type="text/css">
<style>
:root {
/* How far of a scroll travel to the back-to-top link appearing */
--scrollLength: 100vh;
--navbar-height: 56px;
}
body {
position: relative;
}
/* see https://ebidel.github.io/demos/sticky-position-event.html and https://developers.google.com/web/updates/2017/09/sticky-headers */
h2 {
position: -webkit-sticky;
position: sticky;
top: var(--navbar-height);
padding: 10px;
border-color: white;
border-style: solid;
border-width: 1px;
border-top-width: 15px;
border-bottom-width: 15px;
border-radius: 3px;
}
.back-to-top-wrapper {
/* uncomment to visualize "track"*/
/* outline: 1px solid red;*/
position: absolute;
top: var(--scrollLength);
right: 1rem;
bottom: 0;
width: 3em;
pointer-events: none;
}
.back-to-top-link {
position: -webkit-sticky;
position: sticky;
/* reinstate clicks */
pointer-events: all;
/* achieves desired positioning within the viewport */
top: calc(var(--scrollLength) - 5rem);
/* basic styling */
display: inline-block;
font-size: 2rem;
line-height: 3rem;
text-align: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
/* "pretty" styles, including states */
border: 1px solid var(--background-color);
/* transition for scaling on hover */
transition: transform 150ms ease-in;
}
.back-to-top-link:hover, .back-to-top-link:focus {
transform: scale(1.1);
text-decoration: none;
box-shadow: 0 0 0 2px var(--background-color);
background: var(--background-color);
}
.back-to-top-link:hover em, .back-to-top-link:focus em {
color: white;
}
.back-to-top-link em {
color: var(--background-color);
margin-top: -12px;
}
.back-to-top-link em.icon-upward::after {
top: 50%;
}
.anchor-from-summary {
position: relative;
top: -50px;
}
.card {
border-color: #bebebe;
border-radius: 3px;
}
.card:hover, a.card-link:focus .card {
background-color: #fcfafc;
border-color: #3a38d2;
border-width: .09rem;
box-shadow: rgba(0, 0, 0, 0.25) 0 12px 16px;
}
.card-body {
font-style: italic;
}
a.card-link {
color: inherit;
text-decoration: none !important;
}
a.card-link:focus {
box-shadow: none; /* avoid dash line on the left of the card */
}
.card-title {
font-weight: bold;
font-size: 0.85rem;
}
/* spectre config: 840px md / 600px sm / 480px xs */
@media (max-width: 840px) {
.back-to-top-wrapper {
right: 1.25rem;
width: 1rem;
}
.back-to-top-link {
line-height: 2rem;
width: 2rem;
height: 2rem;
}
.icon.icon-2x {
font-size: 24px;
}
}
@media (max-width: 640px) {
.navbar-section > .h3 {
font-size: 0.9rem;
}
.navbar-section .btn {
font-size: 0.7rem;
}
.columns h2 {
font-size: 1rem;
}
}
@media (max-width: 440px) {
.navbar-section > .h3 {
font-size: 0.8rem;
}
.navbar-section .btn {
font-size: 0.6rem;
}
}
</style>
</head>
<body>
<!-- this div element is required for the 'back-to-top' functionality -->
<div id="top"></div>
<header class="navbar bg-dark p-2">
<section class="navbar-section ml-2">
<img src="static/img/logo_64x64_white.png" alt="logo" class="logo">
<span class="h3 text-light ml-2 lib-name-text">bpmn-visualization examples</span>
</section>
<section class="navbar-section" style="flex-grow: 0">
<a href="https://process-analytics.github.io/bpmn-visualization-js/" class="mr-2 btn btn-secondary">Docs</a>
<div class="dropdown mr-2 dropdown-right">
<span class="btn btn-primary dropdown-toggle" tabindex="0">
GitHub <span class="icon icon-caret icon-in-the-middle"></span>
</span>
<ul class="menu">
<li><a href="https://github.com/process-analytics/bpmn-visualization-js" class="mr-2 btn btn-link">Library</a></li>
<li><a href="https://github.com/process-analytics/bpmn-visualization-examples" class="mr-2 btn btn-link">Examples</a></li>
</ul>
</div>
</section>
</header>
<section class="container col-10 flex-centered mt-2">
<div class="columns mt-2">
<section class="col-12 mt-2 mb-2">
<h3>Directly access to <span class="text-normal text-italic">bpmn-visualization</span> live examples.</h3>
<div>
<p>
<span>Technical details about the examples implementation are available in the</span>
<a href="https://github.com/process-analytics/bpmn-visualization-examples" target="_blank" rel="noopener noreferrer">bpmn-visualization-examples</a> repository.
</p>
<h5>Content</h5>
<p>
Demos show what you can do with <code>bpmn-visualization</code> in various use cases, in dedicated user oriented situations.<br>
Examples demonstrate how to use a single feature.
</p>
<ul>
<li><a href="#demos">Demos</a></li>
<li><a href="#tutorials">Tutorials</a></li>
<li>Examples
<ul>
<li><a href="#bpmn-rendering">BPMN rendering</a></li>
<li><a href="#diagram-navigation">Diagram navigation</a></li>
<li><a href="#overlays">Overlays</a></li>
<li><a href="#custom-bpmn-theme">Custom BPMN Theme</a></li>
<li><a href="#custom-behavior">Custom behavior</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul>
</li>
</ul>
<br>
<h5>Getting BPMN Diagrams</h5>
<p>
Some examples require loading local files. If you are looking for BPMN diagram files, you can use resources from:
</p>
<ul>
<li>the BPMN Model Interchange Working Group <a href="https://www.omgwiki.org/bpmn-miwg">(BPMN MIWG)</a>, an
initiative "<em>to support, facilitate, and promote the interchange of BPMN Models</em>"
<ul>
<li><a href="https://github.com/bpmn-miwg/bpmn-miwg-test-suite" target="_blank" rel="noopener noreferrer">bpmn-miwg-test-suite</a></li>
<li><a href="https://github.com/bpmn-miwg/bpmn-miwg-demos" target="_blank" rel="noopener noreferrer">bpmn-miwg-demos</a></li>
</ul>
</li>
<li>the Process Analytics project
<ul>
<li>
<a href="https://github.com/process-analytics/bpmn-visualization-examples/blob/master/bpmn-files/README.md"
target="_blank"
rel="noopener noreferrer">BPMN diagrams</a> of the bpmn-visualization-examples repository</li>
<li>
<a href="https://github.com/process-analytics/bpmn-visualization-js/blob/master/test/fixtures/bpmn/"
target="_blank"
rel="noopener noreferrer">BPMN diagrams</a> used in the tests of <code>bpmn-visualization</code></li>
</ul>
</li>
</ul>
</div>
</section>
<section class="col-12 mt-2 mb-2">
<a id="demos" class="anchor-from-summary"></a>
<h2 class="bg-dark">Demos</h2>
<div class="columns">
<div class="col-md-12 col-4 p-2">
<a href="../demo/load-and-navigation/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Load and Navigation demo</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/demo/load-and-navigation.png" class="img-responsive" alt="load and navigation diagram demo">
</div>
<div class="card-body">Show most of the features provided by <code>bpmn-visualization</code> about
BPMN rendering and diagram navigation when loading BPMN local files.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="../demo/hacktoberfest-custom-themes/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Hacktoberfest custom themes</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/demo/hacktoberfest-custom-themes.png" class="img-responsive" alt="hacktoberfest themes">
</div>
<div class="card-body">Special Hacktoberfest diagram with Hacktoberfest colors/themes.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="../demo/monitoring-all-process-instances/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Monitoring of all process instances demo</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/demo/monitoring-all-process-instances.png" class="img-responsive" alt="monitoring of all process instances demo">
</div>
<div class="card-body">Show how to use <code>bpmn-visualization</code> to render the monitoring of all process instances for a defined process.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="https://process-analytics.github.io/icpm-demo-2022" target="_blank" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Demo for ICPM 2022</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/demo/icpm-2022.png" class="img-responsive" alt="image of the demo for ICPM 2022">
</div>
<div class="card-body">Show a Process Mining scenario (Conformance, Compliance and Happy path).</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="../demo/draw-path/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Draw me a path</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/demo/draw-path.png" class="img-responsive" alt="draw a path">
</div>
<div class="card-body">Show how to use <code>bpmn-visualization</code> to draw a path.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="https://process-analytics.github.io/bonita-day-demo-2023" target="_blank" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Demo for Bonita Day 2023</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/demo/bonita-day-2023.png" class="img-responsive" alt="image of the demo for Bonita Day 2023">
</div>
<div class="card-body">Monitor process and case progress, assign new actors to overdue tasks, view past activities, and track the live execution of a process.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="../demo/prediction/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Prediction demo</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/demo/prediction.png" class="img-responsive" alt="predictions demo image">
</div>
<div class="card-body">Show how to use <code>bpmn-visualization</code> to visualize prediction data.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="https://process-analytics.github.io/bpmn-visualization-addons" target="_blank" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Addons</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src='static/img/preview/demo/bpmn-visualization-addons.png' class="img-responsive" alt="bpmn-visualization-addons demo image">
</div>
<div class="card-body">Show the demos of addons for <code>bpmn-visualization</code> provided by <code>bpmn-visualization-addons</code>.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
</div>
</section>
<section class="col-12 mt-2 mb-2">
<a id="tutorials" class="anchor-from-summary"></a>
<h2 class="bg-dark">Tutorials</h2>
<div class="columns">
<div class="col-md-12 col-4 p-2">
<a href="../tutorials/quick-start/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Quick start</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/tutorials/quick-start.png" class="img-responsive" alt="remotely loaded diagrams">
</div>
<div class="card-body">Know how to use <code>bpmn-visualization</code> in the Browser.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="https://process-analytics.github.io/bpmn-visualization-tutorial-getting-started" target="_blank" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Getting started</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/tutorials/getting-started.gif" class="img-responsive" alt="getting started">
</div>
<div class="card-body">A getting started tutorial to <code>bpmn-visualization</code> using an online monitoring scenario.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
</div>
</section>
<section class="col-12 mt-2 mb-2">
<a id="bpmn-rendering" class="anchor-from-summary"></a>
<h2 class="bg-dark">BPMN Rendering</h2>
<div class="columns">
<div class="col-md-12 col-4 p-2">
<a href="display-bpmn-diagram/load-local-bpmn-diagrams/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Load local BPMN diagrams</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/display-bpmn-diagram/use-local-diagram.png" class="img-responsive" alt="locally loaded diagrams">
</div>
<div class="card-body">Load BPMN diagrams from your device.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="display-bpmn-diagram/load-remote-bpmn-diagrams/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Load remote BPMN diagrams</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/display-bpmn-diagram/use-remote-diagram.png" class="img-responsive" alt="remotely loaded diagrams">
</div>
<div class="card-body">Load BPMN diagrams hosted remotely.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="display-bpmn-diagram/pools-filter-on-load/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Filter pools on load</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/display-bpmn-diagram/pools-filter-on-load.png" class="img-responsive" alt="filter pools of the BPMN diagram">
</div>
<div class="card-body">Filter pools of the BPMN Diagram at load time.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
</div>
</section>
<section class="col-12 mt-2 mb-2">
<a id="diagram-navigation" class="anchor-from-summary"></a>
<h2 class="bg-dark">Diagram navigation</h2>
<div class="columns">
<div class="col-md-12 col-4 p-2">
<a href="diagram-navigation/diagram-navigation/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Diagram Navigation</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/diagram-navigation/diagram-navigation.png" class="img-responsive" alt="navigate within the diagram">
</div>
<div class="card-body">Zoom and move the diagram using the Mouse.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="diagram-navigation/diagram-fit-on-load/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Diagram Fit On Load</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/diagram-navigation/diagram-fit-on-load.png" class="img-responsive" alt="fit the diagram on load">
</div>
<div class="card-body">Fit the diagram whole/horizontally/vertically/center on load.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="diagram-navigation/diagram-fit-after-load/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Diagram Fit After Load</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/diagram-navigation/diagram-fit-after-load.png" class="img-responsive" alt="fit the diagram after load">
</div>
<div class="card-body">Fit the diagram horizontally, vertically, in the center whenever you want.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
</div>
</section>
<section class="col-12 mt-2 mb-2">
<a id="overlays" class="anchor-from-summary"></a>
<h2 class="bg-dark">Overlays</h2>
<div class="columns">
<div class="col-md-12 col-4 p-2">
<a href="overlays/add-remove/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Default overlays</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/overlays/add-remove.png" class="img-responsive" alt="add default overlays and remove all overlays on BPMN elements">
</div>
<div class="card-body">Add default overlays and remove all overlays on BPMN elements.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="overlays/add-stylized/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Stylized overlays</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/overlays/add-stylized.png" class="img-responsive" alt="add stylized overlays displayed on BPMN elements">
</div>
<div class="card-body">Add stylized overlays on BPMN elements.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="overlays/custom-overlay-default-style/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Custom default style of the overlays</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/overlays/custom-overlay-default-style.png" class="img-responsive" alt="custom colors">
</div>
<div class="card-body">Change the default style of the overlays.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
</div>
</section>
<section class="col-12 mt-2 mb-2">
<a id="custom-bpmn-theme" class="anchor-from-summary"></a>
<h2 class="bg-dark">Custom BPMN Theme</h2>
<div class="columns">
<div class="col-md-12 col-4 p-2">
<a href="custom-bpmn-theme/custom-colors/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Custom colors</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-bpmn-theme/custom-colors.png" class="img-responsive" alt="custom colors">
</div>
<div class="card-body">Change default fill and stroke colors, font color, use specific colors depending on the BPMN element.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="custom-bpmn-theme/custom-edge-marker-colors/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Custom Edge marker colors</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-bpmn-theme/custom-edge-marker-colors.png" class="img-responsive" alt="custom colors">
</div>
<div class="card-body">Change the fill colors of the Edge start and end markers.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="custom-bpmn-theme/custom-fonts/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Custom fonts</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-bpmn-theme/custom-fonts.png" class="img-responsive" alt="custom fonts">
</div>
<div class="card-body">Change default font, font color, use specific font depending on the BPMN element.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="custom-bpmn-theme/custom-user-task-icon/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Custom user task icon</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-bpmn-theme/custom-user-icon.png" class="img-responsive" alt="custom icon">
</div>
<div class="card-body">Use your own icon in User Tasks.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
</div>
</section>
<section class="col-12 mt-2 mb-2">
<a id="custom-behavior" class="anchor-from-summary"></a>
<h2 class="bg-dark">Custom behavior</h2>
<div class="columns">
<div class="col-md-12 col-4 p-2">
<a href="custom-behavior/apply-css-classes/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Highlight BPMN elements</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-behavior/apply-css-classes.png" class="img-responsive" alt="apply css classes">
</div>
<div class="card-body">Highlight elements and paths on demand on the BPMN diagram.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="custom-behavior/javascript-tooltip-and-popover/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Attach tooltip and popover to BPMN elements</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-behavior/javascript-tooltip-and-popover.png" class="img-responsive" alt="apply css classes">
</div>
<div class="card-body">Display BPMN information on behavior with the elements of the BPMN diagram.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="custom-behavior/select-elements-by-bpmn-kind/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Select elements by BPMN kind</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-behavior/select-elements-by-bpmn-kind.png" class="img-responsive" alt="select elements by BPMN kind">
</div>
<div class="card-body">Select elements by BPMN kind and register custom behavior on found elements.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="custom-behavior/call-activity-with-modal-on-mouse-over/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Call activity with modal</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-behavior/call-activity-with-modal-on-mouse-over.png" class="img-responsive" alt="call activity with modal">
</div>
<div class="card-body">Open a modal on mouse over on a call activity.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="custom-behavior/call-activity-with-tabs-on-click/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Call activity with tabs</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-behavior/call-activity-with-tabs-on-click.png" class="img-responsive" alt="call activity with tabs">
</div>
<div class="card-body">Switch tab (of the page) on click on a call activity.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="custom-behavior/call-activity-with-reload-on-dblclick/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Call activity on same container</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-behavior/call-activity-with-reload-on-dblclick.png" class="img-responsive" alt="call activity with reload">
</div>
<div class="card-body">Load new BPMN diagram on double-click on call activity.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="custom-behavior/running-dashed-message-flow/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Running Dashed Message Flow</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-behavior/running-dashed-message-flow.gif" class="img-responsive" alt="running dashed message flow">
</div>
<div class="card-body">Add custom running dashed animation on a Message Flow.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="custom-behavior/growing-sequence-flow/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Growing Sequence Flow</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/custom-behavior/growing-sequence-flow.gif" class="img-responsive" alt="growing sequence flow">
</div>
<div class="card-body">Add custom growing animation on a Sequence Flow.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
</div>
</section>
<section class="col-12 mt-2 mb-2">
<a id="miscellaneous" class="anchor-from-summary"></a>
<h2 class="bg-dark">Miscellaneous</h2>
<div class="columns">
<div class="col-md-12 col-4 p-2">
<a href="https://codesandbox.io/s/bpmn-visualization-sandbox-current-version-owu7y5" target="_blank" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">CodeSandbox JavaScript Template</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/misc/codesandbox.png" class="img-responsive" alt="bpmn-visualization JavaScript usage with CodeSandbox">
</div>
<div class="card-body">Play with the <code>bpmn-visualization</code> JavaScript API. Use the template to demonstrate missing features or bugs.<br>
For more information about how to use CodeSandbox, see the <a href="https://codesandbox.io/docs/start" target="_blank">documentation</a>.
</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="https://codesandbox.io/s/bpmn-visualization-ts-sandbox-current-version-1uwb6f" target="_blank" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">CodeSandbox TypeScript Template</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/misc/codesandbox-ts.png" class="img-responsive" alt="bpmn-visualization TypeScript usage with CodeSandbox">
</div>
<div class="card-body">Play with the <code>bpmn-visualization</code> TypeScript API. Use the template to demonstrate missing features or bugs.<br>
For more information about how to use CodeSandbox, see the <a href="https://codesandbox.io/docs/start" target="_blank">documentation</a>.
</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="https://codepen.io/process-analytics/pen/yLRbygP" target="_blank" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Play with the <code>bpmn-visualization</code> API in Codepen</div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/misc/codepen.png" class="img-responsive" alt="bpmn-visualization JavaScript usage with CodePen">
</div>
<div class="card-body">Experiment <code>bpmn-visualization</code> integration and API usage live in your browser.<br>
For more information about how to use CodePen, see the <a href="https://blog.codepen.io/documentation/" target="_blank">documentation</a>.
</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="./misc/compare-with-bpmn-js/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Compare with <code>bpmn-js</code></div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/misc/compare-with-bpmn-js.png" class="img-responsive" alt="compare with bpmn-js">
</div>
<div class="card-body">Compare the libraries on BPMN elements rendering, navigation and API usage.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
<div class="col-md-12 col-4 p-2">
<a href="./misc/compare-with-kie-editors-standalone/index.html" class="card-link">
<div class="card p-2">
<div class="card-header">
<div class="card-title">Compare with <code>kie-editors-standalone</code></div>
<div class="card-subtitle"></div>
</div>
<div class="card-image">
<img src="static/img/preview/misc/compare-with-kie-editors-standalone.png" class="img-responsive" alt="compare with kie-editors-standalone">
</div>
<div class="card-body">Compare the libraries on BPMN elements rendering and API usage.<br>
<b>WARN</b>: the <code>kie-editors-standalone</code> javascript resources are very large (12 MB, more than 3 MB after compression)
and slow to initialize.</div>
<div class="card-footer"></div>
</div>
</a>
</div>
</div>
</section>
</div>
</section>
<!-- inspired by https://moderncss.dev/pure-css-smooth-scroll-back-to-top/ -->
<div class="back-to-top-wrapper float-right">
<a href="#top" class="back-to-top-link" aria-label="Scroll to Top"><em class="icon icon-2x icon-upward"></em></a>
</div>
</body>
</html>