A nice script to generate sequence diagrams in an HTML page:
Taken from: https://unpkg.com/js-sequence-diagrams-autorenderer@1.0.1/index.js
// JS-sequence-diagrams auto-renderer; renders a document using JS-sequence-diagrams (https://bramp.github.io/js-sequence-diagrams/)
// See readme.md for usage instructions
// Pretty inefficient, but it works:
const a = document.createElement('script'); a.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js');
document.head.appendChild(a);
a.onload = () => {
const b = document.createElement('script'); b.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js');
document.head.appendChild(b);
b.onload = () => {
const c = document.createElement('script'); c.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js');
document.head.appendChild(c);
c.onload = () => {
const d = document.createElement('script'); d.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js');
document.head.appendChild(d);
d.onload = () => {
const diagram = Diagram.parse(document.body.textContent);
document.body.textContent = "";
const x = document.createElement('div');
document.body.appendChild(x);
diagram.drawSVG(x, {theme: 'simple'});
}
}
}
}
As an example usage, paste this into a file test.html and open it in your browser:
Jon->Ygritte: Do you remember the cave?
Note right of Ygritte: Long silence...
Ygritte-->Jon: We should have stayed in that cave
Jon->Ygritte: We'll go back there.
Ygritte-->Jon: You know nothing Jon Snow
# Rendered using JS-sequence-diagrams (https://bramp.github.io/js-sequence-diagrams/) by the line below:
# <script src="https://unpkg.com/js-sequence-diagrams-autorenderer@1.0.1/index.js"></script>
