Skip to content

Commit 57c632b

Browse files
docs: use Mermaid diagram for routing page (facebook#8335)
1 parent 571f497 commit 57c632b

6 files changed

Lines changed: 72 additions & 4 deletions

File tree

website/docs/advanced/routing.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,24 @@ Docusaurus' routing system follows single-page application conventions: one rout
1717

1818
Every content plugin provides a `routeBasePath` option. It defines where the plugins append their routes to. By default, the docs plugin puts its routes under `/docs`; the blog plugin, `/blog`; and the pages plugin, `/`. You can think about the route structure like this:
1919

20-
![plugin routes model](/img/routes.png#gh-light-mode-only)![plugin routes model](/img/routes-dark.png#gh-dark-mode-only)
20+
```mermaid
21+
graph LR;
22+
A(["https://example.com/"])
23+
B(["/base-url/"])
24+
C(["/docs/"])
25+
D(["/blog/"])
26+
E(["/"])
27+
F["All docs <br/>routes"]
28+
G["All blog <br/>routes"]
29+
H["All pages <br/>routes"]
30+
A---B;
31+
B---C;
32+
B---D;
33+
B---E;
34+
C---F;
35+
D---G;
36+
E---H;
37+
```
2138

2239
Any route will be matched against this nested route config until a good match is found. For example, when given a route `/docs/configuration`, Docusaurus first enters the `/docs` branch, and then searches among the subroutes created by the docs plugin.
2340

website/static/img/routes-dark.png

-22.9 KB
Binary file not shown.

website/static/img/routes.png

-24 KB
Binary file not shown.

website/versioned_docs/version-2.0.1/advanced/routing.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,24 @@ Docusaurus' routing system follows single-page application conventions: one rout
1717

1818
Every content plugin provides a `routeBasePath` option. It defines where the plugins append their routes to. By default, the docs plugin puts its routes under `/docs`; the blog plugin, `/blog`; and the pages plugin, `/`. You can think about the route structure like this:
1919

20-
![plugin routes model](/img/routes.png#gh-light-mode-only)![plugin routes model](/img/routes-dark.png#gh-dark-mode-only)
20+
```mermaid
21+
graph LR;
22+
A(["https://example.com/"])
23+
B(["/base-url/"])
24+
C(["/docs/"])
25+
D(["/blog/"])
26+
E(["/"])
27+
F["All docs <br/>routes"]
28+
G["All blog <br/>routes"]
29+
H["All pages <br/>routes"]
30+
A---B;
31+
B---C;
32+
B---D;
33+
B---E;
34+
C---F;
35+
D---G;
36+
E---H;
37+
```
2138

2239
Any route will be matched against this nested route config until a good match is found. For example, when given a route `/docs/configuration`, Docusaurus first enters the `/docs` branch, and then searches among the subroutes created by the docs plugin.
2340

website/versioned_docs/version-2.1.0/advanced/routing.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,24 @@ Docusaurus' routing system follows single-page application conventions: one rout
1717

1818
Every content plugin provides a `routeBasePath` option. It defines where the plugins append their routes to. By default, the docs plugin puts its routes under `/docs`; the blog plugin, `/blog`; and the pages plugin, `/`. You can think about the route structure like this:
1919

20-
![plugin routes model](/img/routes.png#gh-light-mode-only)![plugin routes model](/img/routes-dark.png#gh-dark-mode-only)
20+
```mermaid
21+
graph LR;
22+
A(["https://example.com/"])
23+
B(["/base-url/"])
24+
C(["/docs/"])
25+
D(["/blog/"])
26+
E(["/"])
27+
F["All docs <br/>routes"]
28+
G["All blog <br/>routes"]
29+
H["All pages <br/>routes"]
30+
A---B;
31+
B---C;
32+
B---D;
33+
B---E;
34+
C---F;
35+
D---G;
36+
E---H;
37+
```
2138

2239
Any route will be matched against this nested route config until a good match is found. For example, when given a route `/docs/configuration`, Docusaurus first enters the `/docs` branch, and then searches among the subroutes created by the docs plugin.
2340

website/versioned_docs/version-2.2.0/advanced/routing.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,24 @@ Docusaurus' routing system follows single-page application conventions: one rout
1717

1818
Every content plugin provides a `routeBasePath` option. It defines where the plugins append their routes to. By default, the docs plugin puts its routes under `/docs`; the blog plugin, `/blog`; and the pages plugin, `/`. You can think about the route structure like this:
1919

20-
![plugin routes model](/img/routes.png#gh-light-mode-only)![plugin routes model](/img/routes-dark.png#gh-dark-mode-only)
20+
```mermaid
21+
graph LR;
22+
A(["https://example.com/"])
23+
B(["/base-url/"])
24+
C(["/docs/"])
25+
D(["/blog/"])
26+
E(["/"])
27+
F["All docs <br/>routes"]
28+
G["All blog <br/>routes"]
29+
H["All pages <br/>routes"]
30+
A---B;
31+
B---C;
32+
B---D;
33+
B---E;
34+
C---F;
35+
D---G;
36+
E---H;
37+
```
2138

2239
Any route will be matched against this nested route config until a good match is found. For example, when given a route `/docs/configuration`, Docusaurus first enters the `/docs` branch, and then searches among the subroutes created by the docs plugin.
2340

0 commit comments

Comments
 (0)