flowchart LR subgraph D["`Data`"] direction TB x("`xโ`") x1("`xโ`") x2("`xโ`") end direction LR subgraph G0["`GPU0`"] direction LR subgraph N0["`NN`"] end L0["`L0`"] end subgraph G1["`GPU1`"] direction LR subgraph N1["`NN`"] end L1["`L1`"] end subgraph G2["`GPU2`"] direction LR subgraph N2["`NN`"] end L2["`L2`"] end %%subgraph AR["`Average Grads`"] %% direction LR %% ar("`(1/N) โ gโ`") %% %%ar --> bc %%end subgraph AR["` `"] direction TB ar("`Avg Grads<br>(1/N) โ gโ`") %% bc("`Update Weights`") end %%subgraph UW["Update Weights"] %% bc("`Update Weights`") %%end x --> G0 x1 --> G1 x2 --> G2 N0 --> L0 N1 --> L1 N2 --> L2 L0 -.-> ar L1 -.-> ar L2 -.-> ar %% ar -.-> bc %% bc -.-> %%bc -.-> G1 %%bc -.-> G2 %%G0 -.-> ar %%G1 -.-> ar %%G2 -.-> ar %%G0 <-.- bc %%bc -.-> G0 %%bc -.-> G1 %%bc -.-> G2 %%G2 -.-> ar %%X1 -->|"`xโ Wโ <br>+ xโ Wโ`"|X2 classDef block fill:#CCCCCC02,stroke:#838383,stroke-width:1px,color:#838383 classDef grey fill:#cccccc,stroke:#333,stroke-width:1px,color:#000 classDef red fill:#ff8181,stroke:#333,stroke-width:1px,color:#000 classDef orange fill:#FFC47F,stroke:#333,stroke-width:1px,color:#000 classDef yellow fill:#FFFF7F,stroke:#333,stroke-width:1px,color:#000 classDef green fill:#98E6A5,stroke:#333,stroke-width:1px,color:#000 classDef blue fill:#7DCAFF,stroke:#333,stroke-width:1px,color:#000 classDef purple fill:#FFCBE6,stroke:#333,stroke-width:1px,color:#000 classDef text fill:#CCCCCC02,stroke:#838383,stroke-width:0px,color:#838383 class x,y0,L0 red class x1,L1 green class x2,L2 blue class x3,ar grey class D,N0,N1,N2,G0,G1,G2,GU block class AR block class bc text
๐งโโ๏ธ Mermaid
style
personal
Playing with Mermaid diagrams in Quarto.
Citation
BibTeX citation:
@online{foreman2025,
author = {Foreman, Sam},
title = {๐งโโ๏ธ {Mermaid}},
date = {2025-06-02},
url = {https://samforeman.me/posts/2025/06/02/},
langid = {en}
}
For attribution, please cite this work as:
Foreman, Sam. 2025. โ๐งโโ๏ธ Mermaid.โ June 2, 2025. https://samforeman.me/posts/2025/06/02/.