Published
Edited
Jun 6, 2019
2 stars
yuml`// {type:sequence}
[:Computer]sendUnsentEmail>[:Server]
[:Computer]newEmail>[:Server]
[:Server]reponse.>[:Computer]
[:Computer]downloadEmail>[:Server]
[:Computer]deleteOldEmail>[:Server]`
YumlDiagram = require("https://bundle.run/yuml-diagram@1.0.12")
function yuml() {
const source = String.raw.apply(String, arguments);
const root = svg`${(new YumlDiagram()).processYumlDocument(source)}`;
const width = root.getAttribute("width");
const height = root.getAttribute("height");
root.setAttribute("viewBox", `0 0 ${width} ${height}`);
root.style = "max-width: 100%; height: auto;";
return fixLinks(root);
}
function fixLinks(root) {
const fragment = /url\((#[^)]+)\)/;
const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null, false);
while (walker.nextNode()) {
for (const attr of walker.currentNode.attributes) {
const url = attr.value.match(fragment);
if (url) attr.value = attr.value.replace(url[1], location + url[1]);
}
}
return root;
}
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.
