Guide

#Installation

The library ships as one file, bus-diagram.js. It does not load external resources or contact a server. Hosted next to your pages, it works offline, including when a page is opened directly from disk with file://. This documentation describes version 0.3.1.

#Get the file

Download: use the Download button at the top of this page or Export → Library in the designer.
npm: npm install bus-diagram installs the classic script (dist/bus-diagram.js), the ES module (dist/bus-diagram.esm.js), and TypeScript declarations.
CDN: load an exact version from jsDelivr (see below). The page then needs a network connection.
Build from source: run npm install and npm run build. The bundle is written to dist/bus-diagram.js and copied to demo/ and docs/assets/.

#Add it to a page

Load the script once, preferably in <head>:

<script src="bus-diagram.js"></script>

The path is relative to your HTML file. For a page in example/ and a bundle in example/assets/, use src="assets/bus-diagram.js".

To load it from the CDN instead, use this tag, which pins version 0.3.1:

<script src="https://cdn.jsdelivr.net/npm/bus-diagram@0.3.1/dist/bus-diagram.js" integrity="sha384-A2g4Mcuz7JpWDiSIb1qxDI3SgqRMeL/fofK1AH4kzf7KnMnE+aDJX1e/x7+btxyi" crossorigin="anonymous"></script>

The URL contains the full version number, so the page keeps the library it was written for when new versions are published. The integrity attribute makes the browser refuse a file that differs from the published one. The designer's Export → Code to paste into a page produces the same tag. See versions and releases before changing the version.

The defer attribute is supported. Load extension scripts after the library.

#Check the result

Copy an example from the gallery using its HTML tab, then open the page. If the diagram does not appear:

Symptom	What to check
Nothing appears	Check the path to `bus-diagram.js` in the browser console (F12).
A red “Invalid scenario” panel appears	The JSON was parsed but failed validation. Each error shows its field path; see Errors.
“Invalid JSON … line N” appears	Check for a missing comma or quote. The designer highlights the location.

#Browsers

Use a current version of Chrome, Edge, Firefox, or Safari. The library uses Web Components and modern JavaScript. Internet Explorer and PowerPoint slides are unsupported; see Slides for web-based presentations.