2c:null 2d:["$","title",null,{"children":"Convert draw.io XML export format into SVG / plotter commands | Philippe Deschaseaux | Observable"}] 32:T15c6,drawio2pivot = (src) => { const doc = new DOMParser().parseFromString(src, "application/xml"); const groups = subNodes(doc, "mxCell") .filter((node) => node.getAttribute("style") == "group") .map((node) => { const { id, parent, value, style: styleStr } = attributes(node, true); const { x, y } = attributes(subNode(node, "mxGeometry")); return { id, parent, pos: [x, y] }; }); const vertices = new Map( subNodes(doc, "mxCell") .filter((node) => node.getAttribute("vertex") == "1") .filter((node) => node.getAttribute("style") != "group") .filter((node) => { const style = parseStyle(node.getAttribute("style")); return ( (!style.fontColor || style.fontColor == "none") && (!style.strikeColor || style.strikeColor == "none") ); }) .map((node) => { const { id, parent, value, style: styleStr } = attributes(node, true); const style = parseStyle(styleStr); const { text, dashed, strokeColor: sc, strokeWidth: sw } = style; const attrs = attributes(subNode(node, "mxGeometry")); const { x = 0, y = 0, width, height } = attrs; const [xc, yc] = [x + width / 2, y + height / 2]; const vertex = { id, parent, pos: [xc, yc], dims: [width, height] }; if (node.parentNode.tagName == "object") { const attrs = attributes(node.parentNode); vertex.id = attrs.id; const modId = attrs.mod; delete attrs.id; delete attrs.mod; delete attrs.label; vertex.mod = { id: modId, params: attrs }; } vertex.stroke = !( sw == 0 || sc == "none" || (text /*&& sw == undefined*/ && sc == undefined) ); if (dashed == 1) vertex.dashed = true; if (value != undefined) { const ttext = filterStr("" + value); const { verticalAlign, align, fontSize, rotation } = style; const halign = align || (text ? "left" : "center"); const valign = verticalAlign || (text ? "top" : "middle"); const size = fontSize || 12; Object.assign(vertex, { text: { text: ttext, halign, valign, size } }); if (rotation) vertex.text.rotation = -rotation; } if (style.ellipse) { Object.assign(vertex, { shape: "ellipse" }); } else if (style.shape == "mxgraph.basic.arc") { const angles = [style.startAngle, style.endAngle]; Object.assign(vertex, { shape: "arc", angles }); } else if (style.group) { } else if (style.shape == "cylinder3") { Object.assign(vertex, { shape: "cylinder", size: style.size }); } else { Object.assign(vertex, { shape: "rect" }); if (style.rounded) { const arc = style.arcSize; const radius = arc ? (arc * Math.min(width, height)) / 100 : 10; Object.assign(vertex, { radius }); } } return [vertex.id, vertex]; }) ); const edges = subNodes(doc, "mxCell") .filter((node) => node.getAttribute("edge") == "1") .filter((node) => { const style = parseStyle(node.getAttribute("style")); return !style.strikeColor || style.strikeColor == "none"; }) .map((node) => { const { parent, source, target, style: styleStr } = attributes(node); const pts = new Map( subNodes(node, "mxPoint").map((cell) => { const { as, x = 0, y = 0 } = attributes(cell); return [as, [x, y]]; }) ); const pts_ = ((node) => { if (!node) return []; return subNodes(node, "mxPoint").map((cell) => { const { x, y } = attributes(cell); return [x, y]; }); })(subNode(node, "Array")); const style = parseStyle(styleStr); const { exitX, exitY, entryX, entryY } = style; const { edgeStyle, rounded, dashed } = style; const { startArrow, endArrow } = style; const edge = { parent, params: { pts_ } }; if (dashed) edge.params.dashed = true; const offset = (rx, ry) => [ Math.min(2 * rx - 1, 1), Math.min(2 * ry - 1, 1) ]; const abs = (vertex, [rx, ry]) => { const [x, y] = vertex.pos; const [w, h] = vertex.dims; return [x + (rx - 0.5) * w, y + (ry - 0.5) * h]; }; edge.startPt = source ? !isNaN(exitX) ? abs(vertices.get(source), [exitX, exitY]) : vertices.get(source).pos : pts.get("sourcePoint"); edge.endPt = target ? !isNaN(entryX) ? abs(vertices.get(target), [entryX, entryY]) : vertices.get(target).pos : pts.get("targetPoint"); if (source) { edge.start = { vertex: vertices.get(source) }; if (!isNaN(exitX)) edge.start.offset = offset(exitX, exitY); } else edge.start = { pt: pts.get("sourcePoint") }; if (startArrow && startArrow != "none") edge.start.arrow = true; if (target) { edge.end = { vertex: vertices.get(target) }; if (!isNaN(entryX)) edge.end.offset = offset(entryX, entryY); } else edge.end = { pt: pts.get("targetPoint") }; if (endArrow && endArrow != "none") edge.end.arrow = true; if (edgeStyle) { edge.params.style = edgeStyle; if (rounded) edge.params.rounded = true; } if (rounded) edge.params.rounded = true; return edge; }); return { vertices: [...vertices.values()], edges, groups }; }33:Tbb8,vertex2plot = (vertex, plot, groups_) => { const groups = new Map(groups_?.map((group) => [group.id, group])); const vec = (dx, dy) => [dx, dy]; const [HPD, VPD] = [4, 1]; // padding const txtParams = (size) => { const scale = factor * size; return { kerning: -1, scale: [0.75 * scale, scale], inter: 2 }; }; const absCoords = ([x, y], parentId) => { if (parentId == 1) return [x, y]; const group = groups.get(parentId); const [dx, dy] = group ? absCoords(group.pos, group.parent) : [0, 0]; return [x + dx, y + dy]; }; const [x, y] = absCoords(vertex.pos, vertex.parent); plot.move(x, y); const p = Plot(); const [w, h] = vertex.dims || [0, 0]; if (vertex.mod) { p.insert(mods[vertex.mod.id](vertex.mod.params, [w, h])); } else if (vertex.stroke === false); else if (vertex.shape == "arc") { const [a1, a2] = vertex.angles.map((a) => Math.PI * (0.5 - a)); } else if (vertex.shape == "ellipse") { w == h ? p.circle(w / 2) : p.ellipse(w / 2, h / 2); } else if (vertex.shape == "cylinder") { const sz = vertex.size / 2; p.move(-w / 2, -h / 2 + sz); p.draw(w / 2, sz, "+"); p.draw(w / 2, -sz, "+"); p.draw(-w / 2, -sz, "+"); p.draw(-w / 2, sz, "+"); p.draw(0, h - 2 * sz); p.draw(w / 2, sz, "+"); p.draw(w / 2, -sz, "+"); p.draw(0, -h + 2 * sz); p.move(-w / 2, h / 2 - sz); } else if (vertex.shape == "rect") { p.move(-w / 2, -h / 2); if (vertex.radius) { const r = vertex.radius; const [ww, hh] = [w - 2 * r, h - 2 * r]; //const attrs = vertex.radius ? { radius: vertex.radius } : {}; p.move(r, 0); p.draw(ww, 0), p.draw(r, r, -90); p.draw(0, hh), p.draw(-r, r, -90); p.draw(-ww, 0), p.draw(-r, -r, -90); p.draw(0, -hh), p.draw(r, -r, -90); p.move(-r, 0); } else { p.draw(w, 0), p.draw(0, h), p.draw(-w, 0), p.draw(0, -h); } p.move(w / 2, h / 2); } plot.chain(vertex.dashed ? dash(p, [3, 4]) : p); // text if (vertex.text) { const pt = Plot(); const { text, halign = "center", valign = "middle", size, rotation, expand } = vertex.text; const params = { ...txtParams(size), halign, valign, ...(rotation && { rotation }), expand }; const lines = text.split("
"); const dx = { right: w / 2 - HPD, center: 0, left: -w / 2 + HPD }[halign]; const dy = { bottom: h / 2 - VPD, middle: 0, top: -h / 2 + VPD }[valign]; if (rotation) { const vec = (dx, dy, angle) => { if (!angle) return [dx, dy]; const rad = angle * (Math.PI / 180); const [cos, sin] = [Math.cos(rad), Math.sin(rad)]; return [dx * cos - dy * sin, dx * sin + dy * cos]; }; pt.move(...vec(dx, dy, rotation)); pt.text(lines, params); pt.move(...vec(-dx, -dy, rotation)); } else pt.move(dx, dy).text(lines, params).move(-dx, -dy); plot.chain(pt); } plot.move(-x, -y); }34:T199d,edge2plot = (edge, plot, groups_) => { const groups = new Map(groups_?.map((group) => [group.id, group])); const absCoords = (pos, parentId) => { const [x, y] = pos; if (parentId == 1) return [x, y]; const group = groups.get(parentId); const [dx, dy] = group ? absCoords(group.pos, group.parent) : [0, 0]; return [x + dx, y + dy]; }; const abs = (end) => { const { vertex, pt, arrow, offset } = end; const abs = { pt, arrow, offset }; if (vertex) { const { parent, pos, dims, shape } = vertex; abs.vertex = { parent, dims, shape, pos: absCoords(pos, parent) }; } return abs; }; const [start, end] = [abs(edge.start), abs(edge.end)]; const params = edge.params || {}; const { dashed } = params; const pts_ = params.pts_ || []; const [pt1, pt2] = [start.vertex?.pos || start.pt, end.vertex?.pos || end.pt]; const intersect = (end, [dx, dy]) => { if (!end.vertex) return end.pt; const { pos, dims, shape, parent } = end.vertex; const [dw, dh] = V2.mul(dims, 1 / 2); if (shape == "ellipse") { const angle = V2.atan([dx, dy]); if (dw == dh) return V2.add(pos, V2.polar(angle, dw)); // circle const hyp = Math.hypot(dh * Math.cos(angle), dw * Math.sin(angle)); return V2.add(pos, V2.polar(angle, (dw * dh) / hyp)); } else { const ddx = dy == 0 ? dw : Math.min(dh * Math.abs(dx / dy), dw); const ddy = dx == 0 ? dh : Math.min(dw * Math.abs(dy / dx), dh); return V2.add(pos, [ddx * Math.sign(dx), ddy * Math.sign(dy)]); } }; const arrow = (vec, size) => { const n = V2.normalize(vec); const [f, ft, fr] = [size * 6.5, size * 3, 0.6]; const [dxa, dya] = V2.mul(n, f - fr); const [dxt, dyt] = V2.rotL(V2.mul(n, ft)); plot.move(-dxa + dxt, -dya + dyt); plot.draw(dxa - dxt, dya - dyt); plot.draw(-dxa - dxt, -dya - dyt); plot.move(dxa + dxt, dya + dyt); }; const path = (...pts) => { const prox = (pt1, pt2, d) => { const v = V2.vec(pt1, pt2); const dist = V2.norm(v); const ratio = dist == 0 ? 0 : Math.min(d, dist / 2) / dist; return V2.add(pt1, V2.mul(v, ratio)); }; let [prev, curr, next] = [null, pts.shift(), pts.shift()]; plot.move(...V2.vec([0, 0], curr)); let c1, c2; if (start.arrow) arrow(V2.vec(next, curr), 1); const link = Plot(); // arrows are not dashed do { if (params.rounded) { if (prev) { c2 = prox(curr, prev, 10); link.draw(...V2.vec(c1 || prev, c2)); c1 = prox(curr, next, 10); const dir = V2.prod(V2.vec(prev, curr), V2.vec(curr, next)); link.draw(...V2.vec(c2, c1), dir > 0 ? "-" : "+"); // curb } } else link.draw(...V2.vec(curr, next)); (prev = curr), (curr = next); } while ((next = pts.shift())); if (params.rounded) link.draw(...V2.vec(c1 || prev, curr)); plot.chain(dashed ? dash(link, dashed === true ? [3, 4] : dashed) : link); if (end.arrow) arrow(V2.vec(prev, curr), 1); plot.move(...V2.vec(curr, [0, 0])); }; let xs, ys, xe, ye; const endingCoords = ({ vertex: { pos, dims, parent }, offset }) => { const [[w, h], [rx, ry]] = [dims, offset]; return V2.add(pos, [rx * (w / 2), ry * (h / 2)]); }; if (start.offset) [xs, ys] = endingCoords(start); if (end.offset) [xe, ye] = endingCoords(end); if (!params.style) { if (start.offset && !end.offset) { const pts = [[xs, ys], ...pts_]; path(...pts, intersect(end, V2.vec(pt2, pts.at(-1)))); } else if (!start.offset && end.offset) { const pts = [...pts_, [xe, ye]]; path(intersect(start, V2.vec(pt1, pts[0])), ...pts); } else if (start.offset && end.offset) { path([xs, ys], ...pts_, [xe, ye]); } else { path( intersect(start, V2.vec(pt1, pts_[0] || pt2)), ...pts_, intersect(end, V2.vec(pt2, pts_.at(-1) || pt1)) ); } } else { const [w1, h1] = start.vertex?.dims || [0, 0]; const [w2, h2] = end.vertex?.dims || [0, 0]; const [dx, dy] = V2.vec(pt1, pt2); const [sx, sy] = [Math.sign(dx), Math.sign(dy)]; if (start.offset && end.offset) { const [sx, sy] = start.offset; const [ex, ey] = end.offset; let pts; if (pts_.length > 0) { pts = pts_; } else { const MARGIN = 20; if ((sx == -1 || sx == 1) && (ey == -1 || ey == 1)) { const yi = (ye + start.vertex.pos[1] - (ey * h1) / 2) / 2; if (sx == -1 && xs - xe < MARGIN) { pts = new Array([xs - MARGIN, ys], [xs - MARGIN, yi], [xe, yi]); } else if (sx == 1 && xe - xs < MARGIN) { pts = new Array([xs + MARGIN, ys], [xs + MARGIN, yi], [xe, yi]); } else pts = [[xe, ys]]; } else if ((sy == -1 || sy == 1) && (ex == -1 || ex == 1)) { const xi = (xe + start.vertex.pos[0] - (ex * w1) / 2) / 2; if (sy == -1 && ys - ye < MARGIN) { pts = new Array([xs, ys - MARGIN], [xi, ys - MARGIN], [xi, ye]); } else if (sy == 1 && ye - ys < MARGIN) { pts = new Array([xs, ys + MARGIN], [xi, ys + MARGIN], [xi, ye]); } else pts = [[xs, ye]]; } else if (sx == 1 && ex == -1) { const xi = (xs + xe) / 2; pts = new Array([xi, ys], [xi, ye]); } else pts = []; } path([xs, ys], ...pts, [xe, ye]); } else if (dx == 0 || dy == 0) { const [x1, y1] = intersect(start, dx == 0 ? [0, sy] : [sx, 0]); const [x2, y2] = intersect(end, dx == 0 ? [0, -sy] : [-sx, 0]); path([x1, y1], [x2, y2]); } else if (Math.abs(dx) >= Math.abs(dy)) { const [x1, y1] = intersect(start, [sx, 0]); if (Math.abs(dy) > (h1 + h2) / 2) { const [x2, y2] = intersect(end, [0, -sy]); path([x1, y1], [x2, y1], [x2, y2]); } else { const [x2, y2] = intersect(end, [-sx, 0]); const xm = (x1 + x2) / 2; path([x1, y1], [xm, y1], [xm, y2], [x2, y2]); } } else { const [x1, y1] = intersect(start, [0, sy]); if (Math.abs(dx) > (w1 + w2) / 2) { const [x2, y2] = intersect(end, [0, -sy]); console.log(end, [x2, y2]); path([x1, y1], [x2, y1], [x2, y2]); } else { const [x2, y2] = intersect(end, [-sx, -0]); const ym = (y1 + y2) / 2; path([x1, ym], [x2, ym], [x2, y2], [x2, y2]); } /*const [x2, y2] = intersect(end, [0, -sy]); const ym = (y1 + y2) / 2; return path([x1, y1], [x1, ym], [x2, ym], [x2, y2]);*/ } } }35:[{"id":"84da68955728c8ba9a8aeee8d1460561d6fffa32c034f0039249372bb0e613116f06bbd6b81c94d5341a0367f4934b92d6620f82f7abe3b8fab2c58547bdeebf","href":"https://static.observableusercontent.com/files/84da68955728c8ba9a8aeee8d1460561d6fffa32c034f0039249372bb0e613116f06bbd6b81c94d5341a0367f4934b92d6620f82f7abe3b8fab2c58547bdeebf","name":"GeoJSON - TopoJSON.drawio.xml","type":"application/xml","lastModified":1777388370777.602,"size":71793}] 30:{"id":"ff47aa9e300dd747","slug":"draw-io-to-pen-plotter","title":"Convert draw.io XML export format into SVG / plotter commands","thumbnail":"88ec2ac9b2f8fcaf6ac032e27e1cb8cedea54813a1640504cb9bdac319b6f5fd","access_level":"public","create_time":"$D2023-05-12T15:17:25.714Z","update_time":"$D2026-09-10T12:14:38.221Z","view_time":null,"first_public_time":"$D2023-05-12T15:17:25.714Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cf2a83be2759e071","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":"starter_2024","bio":""},"version":2154,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null,"bio":""}],"members":[{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null,"role":"editor"}],"comments":[{"id":"718bc0a5919c9c8b","reply_to_id":null,"content":"TODOs:\n- Create a separate plot for each color","create_time":"$D2025-10-06T07:12:49.850Z","update_time":"$D2025-10-06T13:03:53.235Z","resolved":false,"user":{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"43e6ecff4165448a","slug":"pen-plotter","title":"Pen plotter","owner":{"id":"cf2a83be2759e071","login":"ehouais","name":"Philippe Deschaseaux"}},"type":"notebook","body":{"titling":"auto","title":"Convert draw.io XML export format into SVG / plotter commands","cells":[{"id":0,"value":"# Convert draw.io XML export format into SVG / plotter commands","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"[draw.io](https://draw.io) is a great online tool for designing diagrams, and it allows exporting in a variety of formats. I would like to leverage its ease of use to feed [my iDraw pen plotter](https://observablehq.com/@ehouais/first-steps-with-my-pen-plotter), so I need to tweak the export to fit my needs:\n* ignore fill and stroke attributes,\n* [use single-line font](https://observablehq.com/@ehouais/text-to-plotter-compatible-svg),\n* avoid duplicate paths,\n* etc.\n\nExported SVG is a bit hard to process (mainly because of the way text is exported), so I concentrate my efforts on the default higher-level XML format. Unfortunately, the format isn't directly documented anywhere, and the corresponding generator javascript source code is only available [in minified form](https://github.com/jgraph/drawio/blob/dev/src/main/webapp/mxgraph/mxClient.js). The reverse engineering takes a lot of guess work, but it is not that hard, and this format could become the pivot format for my pen-plotter pipelines.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":559,"value":"#### pros\n* text node strings are easily accessible in the XML structure\n* diagram XML source can be fetched from inside the app (in the \"Extras/Edit diagram...\" menu), without having to export to a file\n\n#### cons\n* Links routing logic must be re-implemented, which is a tedious work\n* draw.io predefined shapes are just referenced in the XML (through the `style=\"shape=...\" attribute`), so they won't be present in the generated SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"This notebook lets you choose a .drawio file or paste drawio XML content, then converts the XML into opinionated SVG.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"**Disclaimer**: This is a proof of concept and a work in progress: only a part of the graphical features are taken into account, the backlog is ever-growing and the code is rather messy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"const drawioFile = view(Inputs.file({\n label: \"draw.io file\",\n accept: \".drawio\"\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"{\n const button = Inputs.button(\"Load\", { label: \"Load sample data\" });\n button.addEventListener(\"input\", async (e) => {\n e.stopPropagation();\n const xml = await FileAttachment(\"GeoJSON - TopoJSON.drawio.xml\").text();\n viewof src.update(xml);\n });\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"viewof src = {\n const textarea = Inputs.textarea({\n label: \"XML source\",\n rows: 20,\n value: drawioFile ? await drawioFile.text() : \"\"\n });\n textarea.update = (xml) => {\n textarea.value = xml;\n textarea.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n return textarea;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"{\n const button = Inputs.button(\"Reset\", { label: \"Reset data\" });\n button.addEventListener(\"input\", async (e) => {\n e.stopPropagation();\n viewof src.update(\"\");\n });\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"viewof factor = Inputs.range([0.01, 0.05], {\n step: 0.001,\n label: \"Text size factor\",\n value: 0.035\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"viewPivot(600)(pivot)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"doc = src ? new DOMParser().parseFromString(src, \"application/xml\") : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"format of pivot data structure:\n```\n{\n groups: [\n { parent, pos: [x, y] }, ...\n ],\n vertices: [\n {\n id,\n parent,\n pos: [x, y],\n dims: [w, h],\n text: { text, halign, valign, size },\n shape: \"text\" | \"ellipse\" | \"rect\" | \"arc\",\n [startAngle: ],\n [endAngle: ]\n }, ...\n ],\n edges: [\n {\n parent,\n start: { pt: [x, y], vertex, offset: [dx, dy], pts_, arrow: boolean },\n end: { pt: [x, y], vertex, offset: [dx, dy], pts_, arrow: boolean },\n params: { dashed }\n }, ...\n ]\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1652,"value":"filterStr = (str) => str\n .replace(/&/g, \"&\")\n .replace(/ /g, \" \")\n .replace(/"/g, '\"')\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/]*>/g, \"\")\n .replace(/]*>/g, \"\")\n .replace(/<\\/font>/g, \"\")\n .replace(/]*>/g, \"\")\n .replace(/<\\/span>/g, \"\")\n .replace(/%3CmxGraphModel%3E.*%3C%2FmxGraphModel%3E/, \"\")\n .replace(/]*>/g, \"
\")\n .replace(/<\\/div>/g, \"
\")\n .replace(/]*>([^<]*)<\\/h1>/g, \"$1\")\n .replace(/]*>/g, \"
\")\n .replace(/

/g, \"
\")\n .replace(/

/g, \"
\")\n .replace(/^
/, \"\")\n .replace(/
$/, \"\")\n .replace(/ /g, \" \")\n .replace(/^ /, \"\")\n .replace(/ $/, \"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"pivot = drawio2pivot(src)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2022,"value":"viewPivot = (height, sw = 1) =>\n (pivot) =>\n viewer([width, height], true).view(pivot2plot(pivot), {\n \"stroke-width\": sw\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"pivot2plot = ({ vertices, edges, groups }) => {\n const plot = Plot();\n for (const vertex of vertices || []) vertex2plot(vertex, plot, groups);\n for (const edge of edges || []) edge2plot(edge, plot, groups);\n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1906,"value":"mods = ({\n angle: (params, [w, h]) => {\n const p = Plot();\n const deg = params.angle;\n const [r, rad] = [0.8 * Math.min(w, h), deg * (Math.PI / 180)];\n const [dx, dy] = [Math.cos(rad) * r, -Math.sin(rad) * r];\n p.move(-r / 2, r / 2).draw(dx, dy);\n if (deg > 0) p.draw(r - dx, -dy, -deg);\n const d = Plot();\n deg > 0 ? d.draw(-r, 0) : d.move(-r, 0);\n deg < 90 ? d.draw(0, -r).draw(dx, r + dy, deg - 90) : d.move(0, -r);\n p.insert(dash(d, [r / 20, r / 7]));\n return p;\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"## backlog\n* default values as editable parameters\n* configurable single-line font\n* other shapes\n* other markers for edge start and end\n* document the format\n* groups\n* package as a npm module ?\n* Inverse SVG to draw.io conversion ?\n* double frame\n* aspect ratio / horizontal compression\n* ratioX / ratioY for text\n* monospace text\n* text on links","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1116,"value":"import {\n Plot,\n viewer,\n dash,\n optimize,\n V2\n} from \"@ehouais/pivot-format-for-plotter-experiments\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"attributes = (node, keepStrings) =>\n Object.fromEntries(\n [...node.attributes].map(({ name, value }) => {\n const val = value == \"\" ? undefined : value;\n if (keepStrings) return [name, val];\n else return [name, isNaN(value) ? value : +value]; //isNaN(\"\") returns false !!!\n })\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"subNodes = (node, tagName) => [...node.getElementsByTagName(tagName)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"subNode = (node, tagName) => node.getElementsByTagName(tagName)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"parseStyle = (str) =>\n Object.fromEntries(\n str\n .split(\";\")\n .map((token) => token.split(\"=\"))\n .map(([key, value]) => [\n key,\n value == undefined ? true : isNaN(value) ? value : +value\n ])\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"