Makes every Mermaid diagram type -- and ZenUML, through its plugin --
navigable with audio, text, braille and keyboard: it parses the diagram's text with Mermaid's own parser, reads the
result, and pairs it with the SVG Mermaid drew.
Remarks
Mermaid must render with startOnLoad: false, so the adapter can take each
diagram's text before Mermaid replaces it with the drawing. Then either
call bindMermaid in place of mermaid.run(), or render yourself and
call createMaidrFromMermaid with the text and the SVG.
Example
<preclass="mermaid"> flowchart LR A[Order] --> B{In stock?} B -->|yes| C[Ship] B -->|no| D[Back-order] </pre> <scriptsrc="https://cdn.jsdelivr.net/npm/mermaid@12/dist/mermaid.min.js"></script> <scriptsrc="https://cdn.jsdelivr.net/npm/maidr/dist/maidr.js"></script> <scriptsrc="https://cdn.jsdelivr.net/npm/maidr/dist/mermaid.js"></script> <script> mermaid.initialize({ startOnLoad:false }); maidrMermaid.bindMermaid(mermaid); </script>
Mermaid adapter for MAIDR.
Makes every Mermaid diagram type -- and ZenUML, through its plugin -- navigable with audio, text, braille and keyboard: it parses the diagram's text with Mermaid's own parser, reads the result, and pairs it with the SVG Mermaid drew.
Remarks
Mermaid must render with
startOnLoad: false, so the adapter can take each diagram's text before Mermaid replaces it with the drawing. Then either call bindMermaid in place ofmermaid.run(), or render yourself and call createMaidrFromMermaid with the text and the SVG.Example