This is a set of stylesheets for displaying sequence diagrams in HTML pages.
You can write in semantic markup (demo page) or pure CSS (demo page) - be sure to look at the source.
To embed in your page, you'll need sequence-diagram.css
, plus either the conversion script or an extra CSS file for columns.
The underlying markup works by separating everything into columns and adding CSS classes (e.g. col-2-4
for column 2 in a 4-column layout). If you're doing the layout manually (pure CSS option), you'll need to include sequence-diagram-columns.css
.
However, you shouldn't have to write this layout code yourself, instead writing the semantic markup.
The diagram can be entered in a more intuitive way (no layout concerns). To automatically convert, include the convert.js
script, and place the diagram markup in a <sequence-diagram-semantic>
element. You do not need the column CSS, because the conversion script generates CSS as needed.
All elements in the semantic markup can be used either directly (i.e. <sequence-diagram-semantic>
) or declared by the corresponding CSS class (i.e. <div class="sequence-diagram-semantic">
).
Entities are declared with a <header>
element. Each entity is an <entity>
element, with an optional alias
attribute specifying how it will be referred to later.
<sequence-diagram-semantic>
<header>
<entity>Alice</entity>
<entity>Bob</entity>
<entity>Carol</entity>
<entity alias="cat">Dani's cat</entity>
</header>
...
</sequence-diagram-semantic>
Actions are declared with a <action>
element.
The source/target of the action can be specified either with <to>
/<from>
elements, or to
/from
properties, depending on whether they're part of the content or not:
<sequence-diagram-semantic>
<header>...</header>
<action><from>Alice</from> asks <to>Bob</to> a question</action>
<action from="Bob" to="Alice">reply</action>
</sequence-diagram-semantic>
Notes and events are declared with <note>
or <event>
elements.
As with <action>
s, to
/from
(attributes or elements) can be used to span the event between two entities. However, <for>
(or the for=
attribute) can be used to place associate the note/event with a single entity.
Also included is a (fairly hacky) convertor that takes in a simple text format and outputs HTML:
Alice --> Carol: say hello
Carol: (notes go here)
Dani: some event
See more at the live demo.