Published
Edited
Jul 14, 2020
mscgen`msc { a,b; a=>>b[label=renderthis]; }`
mscgen`msc {
hscale = "1";
a,b,c;
a->b [ label = "ab()" ] ;
b->c [ label = "bc(TRUE)"];
c=>c [ label = "process(1)" ];
c=>c [ label = "process(2)" ];
...;
c=>c [ label = "process(n)" ];
c=>c [ label = "process(END)" ];
a<<=c [ label = "callback()"];
--- [ label = "If more to run", ID="*" ];
a->a [ label = "next()"];
a->c [ label = "ac1()\nac2()"];
b<-c [ label = "cb(TRUE)"];
b->b [ label = "stalled(...)"];
a<-b [ label = "ab() = FALSE"];
}`
mscgen = (strings, ...keys) => {
const src = typeof strings === "string" ? strings : strings.join('');
const elementId = ('' + Math.random()).slice(3);
const target = html`<span id="${elementId}"></span>`;
/*
// render once to raise a nice error if parsing fails
mscgenjs.renderMsc(src, {}, (pError, pSuccess) => {
if (Boolean(pError)) {
pError.message =
pError.message + '\nat ' + JSON.stringify(pError.location.start);
throw pError;
return;
} else if (pSuccess) {
return pSuccess;
}
});
*/
// render a second time to an element we'll put in the page
setTimeout(() => mscgenjs.renderMsc(src, { elementId }));
return target;
}
mscgenjs = require('mscgenjs@5.0.0/dist/bundle/index.min.js')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
