Conversation
Mermaid Live Editor export produces an invalid SVG. To fix this, we apply the following patch: perl -pi -e 's/ / /g' webnn_arch.png This replaces all non-breaking space character entity references with numeric entity references   Mermaid syntax does not support numeric entity references, so we need to rely on this patch if we want to be white space perfect. Consider: Core ML => Core ML Mermaid source used to produce this SVG: ```mermaid %%{ init : { "look" : "handDrawn", "theme" : "neo-dark" }}%% flowchart TD subgraph Models Model[ONNX, TensorFlow, PyTorch] end subgraph Frameworks Framework(ONNX Runtime Web, LiteRT) end subgraph Browser_APIs[Browser APIs] Wasm WebNN WebGPU end subgraph Native_ML_APIs[Native ML APIs] MLAPI[DirectML / LiteRT / Core ML] end subgraph Hardware CPU NPU GPU end Model --> Framework Framework --> Wasm Framework ==> WebNN Framework --> WebGPU Wasm --> CPU WebNN ==> MLAPI WebGPU --> GPU MLAPI ==> CPU MLAPI ==> NPU MLAPI ==> GPU ```
|
Those labels are a bit hard to see. 
FWIW, my flow in #870 (comment) was to paste the existing diagram in ChatGPT, ask it to create a Mermaid diagram out of it, and then fact-check it and polish it in the online editor. |
|
Those subgraph labels were also bugging me. IIRC we found out positioning them was not possible without CSS hacks that come with side effects. Please check with your favourite LLM to see if there's indeed a non-hacky solution :-) |
|
Your diagram looks like drawn with Excalidraw. Maybe just move the labels up so they are between boxes next to the arrows? |
|
It's drawn with Mermaid, the source code is in the commit message 1bc34db and if you drop that source into https://mermaid.live/ it should render as in https://github.com/webmachinelearning/webnn/blob/main/explainer.md I'd like to have clean Mermaid source without hacks that either as is could be used as an alt text, or used as input to LLM to produce a good quality alt text. |
Place its source inside a disclosure widget
There was a problem hiding this comment.
Pull Request Overview
This PR updates the WebNN architecture diagram by adding an SVG export of the diagram alongside the existing Mermaid version.
- Adds an SVG image link for the WebNN architecture diagram.
- Wraps the SVG source in a collapsible
Details
block for additional information.
Co-authored-by: Copilot <[email protected]>
|
I updated this PR to make this a clean drop-in replacement from the current script-generated graph to an identical SVG, retaining the source. To be iterated further to improve accessibility. Copilot suggested an alt text that I adopted for now. It looks like we cannot test this without deploying to production, so I'll hit the green button. 🤞 |
|
It appears embedding SVG into Markdown did not work as expected, so I deployed a hotfix 093be92 to revert back to the script-generated graph. Sorry for the noise. |
Mermaid Live Editor export produces an invalid SVG. To fix this, we apply the following patch: perl -pi -e 's/ / /g' webnn_arch.png This replaces all non-breaking space character entity references with numeric entity references   Mermaid syntax does not support numeric entity references, so we need to rely on this patch if we want to be white space perfect. Consider: Core ML => Core ML Mermaid source used to produce this SVG: ```mermaid %%{ init : { "look" : "handDrawn", "theme" : "neo-dark" }}%% flowchart TD subgraph Models Model[ONNX, TensorFlow, PyTorch] end subgraph Frameworks Framework(ONNX Runtime Web, LiteRT) end subgraph Browser_APIs[Browser APIs] Wasm WebNN WebGPU end subgraph Native_ML_APIs[Native ML APIs] MLAPI[DirectML / LiteRT / Core ML] end subgraph Hardware CPU NPU GPU end Model --> Framework Framework --> Wasm Framework ==> WebNN Framework --> WebGPU Wasm --> CPU WebNN ==> MLAPI WebGPU --> GPU MLAPI ==> CPU MLAPI ==> NPU MLAPI ==> GPU ```
2 participants
Issue #870 reminded me we'd need a new SVG export for the architecture diagram too, so I took a plunge into the world of SVG.
It seems GH diff UI (below) does not render the SVG properly, but it does render with all major browser after applying the patch (see the commit message): https://raw.githubusercontent.com/webmachinelearning/webnn/arch-diagram-svg/content/webnn_arch.svg
I kept the Mermaid in the explainer for now, and put a note in there so we remember this SVG exists.
PTAL @tomayac for cross-checking if there's a better way to export this without errors.
FYI @matatk, here's another diagram we want to make screen reader friendly.