mermaid workflow coloring

web/src/mermaid.ts

@@ -57,6 +57,25 @@ export function diagram(src: string): HTMLElement {
   return el;
 }
 
+const latest = new WeakMap<HTMLElement, number>();
+
+export async function redraw(el: HTMLElement, src: string) {
+  const id = next++;
+  latest.set(el, id);
+  try {
+    const m = await load();
+    const { svg } = await m.render(`mermaid-${id}`, src);
+    if (latest.get(el) === id) {
+      el.innerHTML = svg;
+    }
+  } catch (err) {
+    if (latest.get(el) !== id) {
+      return;
+    }
+    el.replaceChildren(h("pre", { class: "mermaid-source" }, src), h("div", { class: "mermaid-error" }, `diagram not rendered: ${errorText(err)}`));
+  }
+}
+
 async function render(el: HTMLElement, src: string) {
   try {
     const m = await load();