https://github.com/geraintluff/sequence-diagram-html
CSS (plus convertors) for sequence diagrams
https://github.com/geraintluff/sequence-diagram-html
Last synced: 11 months ago
JSON representation
CSS (plus convertors) for sequence diagrams
- Host: GitHub
- URL: https://github.com/geraintluff/sequence-diagram-html
- Owner: geraintluff
- Created: 2014-02-26T04:01:15.000Z (over 12 years ago)
- Default Branch: gh-pages
- Last Pushed: 2015-10-08T15:50:13.000Z (over 10 years ago)
- Last Synced: 2025-04-12T21:11:30.760Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://geraintluff.github.io/sequence-diagram-html/
- Size: 151 KB
- Stars: 55
- Watchers: 4
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sequence Diagrams for HTML
This is a set of stylesheets for displaying sequence diagrams in HTML pages.
You can write in semantic markup ([demo page](http://geraintluff.github.io/sequence-diagram-html/example-semantic.html)) or pure CSS ([demo page](http://geraintluff.github.io/sequence-diagram-html/example-css.html)) - be sure to look at the source.
To embed in your page, you'll need [`sequence-diagram.css`](http://geraintluff.github.io/sequence-diagram-html/sequence-diagram.css), plus either the conversion script or an extra CSS file for columns.
## Pure CSS (includes layout)
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`](http://geraintluff.github.io/sequence-diagram-html/sequence-diagram-columns.css).
However, you shouldn't have to write this layout code yourself, instead writing the semantic markup.
## Semantic markup
The diagram can be entered in a more intuitive way (no layout concerns). To automatically convert, include the [`convert.js`](http://geraintluff.github.io/sequence-diagram-html/convert.js) script, and place the diagram markup in a `` 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. ``) or declared by the corresponding CSS class (i.e. `
`).
### Declaring entities
Entities are declared with a `` element. Each entity is an `` element, with an optional `alias` attribute specifying how it will be referred to later.
```html
Alice
Bob
Carol
Dani's cat
...
```
### Actions
Actions are declared with a `` element.
The source/target of the action can be specified either with ``/`` elements, or `to`/`from` properties, depending on whether they're part of the content or not:
```html
...
Alice asks Bob a question
reply
```
### Notes and events
Notes and events are declared with `` or `` elements.
As with ``s, `to`/`from` (attributes or elements) can be used to span the event between two entities. However, `` (or the `for=` attribute) can be used to place associate the note/event with a single entity.
## Conversion from text
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](http://geraintluff.github.io/sequence-diagram-html/).