You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Mermaid is a JavaScript based diagram generator that uses Markdown for descriptions and is available to docusaurus through a [plug-in](https://docusaurus.io/docs/next/markdown-features/diagrams).
380
381
381
382
To get started with Mermaid diagrams, use their [live tool](https://mermaid.live/edit). The live viewing tool is useful to explore the various diagrams using their readily available templates.
382
-
>> Currently, we are on version 2.4.3 of the Mermaid plug-in. Therefore, not all of the templates in the live version are available.
383
+
384
+
> > Currently, we are on version 2.4.3 of the Mermaid plug-in. Therefore, not all of the templates in the live version are available.
383
385
384
386
Although Mermaid is more complicated to use than other tools, it is easy to version and outputs HTML objects; the resulting diagrams can include links and the text within it is searchable. Additionally, HTML tags can be included within the diagrams for further customization. Refer to the [Mermaid Documentation](https://mermaid.js.org/intro/getting-started.html) for more details on the diagram descriptions.
385
387
386
388
### Themes
389
+
387
390
In the [Docusaurus configuration file](./docusaurus.config.js), we have defined the site-wide themes for the Mermaid diagrams. Mermaid offers a choice of five different themes to choose from. There is a way to call the `mermaidAPI` to set a customized site-wide theme, however, this has not yet been implemented.
388
391
389
392
See their [theming documentation](https://mermaid.js.org/config/theming.html) for more information.
390
393
391
394
### Creating a Diagram
395
+
392
396
In Docusaurus, we can use a [dyanmic Mermaid component](https://docusaurus.io/docs/next/markdown-features/diagrams#component) to define and load diagrams.
393
397
394
398
First, we import the dynamic component.
399
+
395
400
```
396
401
import Mermaid from '@theme/Mermaid';
397
402
```
398
403
399
404
Then, we instantiate the component with the graph passed in as an argument.
405
+
400
406
```
401
407
<Mermaid
402
408
value={`
@@ -410,9 +416,11 @@ Then, we instantiate the component with the graph passed in as an argument.
410
416
```
411
417
412
418
### Configuring the Diagram
419
+
413
420
Diagrams can be modified indepent from the site-wide theme and configuration using [directives](https://mermaid.js.org/config/directives.html). Essentially, these directives are used to pass in an initialization configuration to the local diagram that overrides the existing global configuration.
414
421
415
422
For example, we can modify the way the arrow connecting two nodes is generated. Instead of the default, we can set the `curve` parameter to `step` to have the generated arrow move in steps rather than a smooth curve.
423
+
416
424
```
417
425
<Mermaid
418
426
value={`
@@ -434,10 +442,10 @@ For example, we can modify the way the arrow connecting two nodes is generated.
434
442
435
443
Notice that when defining a directive within the dynamic component, we must end every line with a backslash `\`. Make sure to not have any trailing commas, `,`, at the end of a list or dictionary.
436
444
437
-
See the [flowchart configuration](
438
-
https://mermaid.js.org/config/schema-docs/config-defs-flowchart-diagram-config.html) to see all the settings specific to flowcharts that can be modified with directives.
445
+
See the [flowchart configuration](https://mermaid.js.org/config/schema-docs/config-defs-flowchart-diagram-config.html) to see all the settings specific to flowcharts that can be modified with directives.
439
446
440
447
You may notice that there is no way to set the font size through the diagram's configuration. Instead that must be done by modifying the theme variables.
448
+
441
449
```
442
450
<Mermaid
443
451
value={`
@@ -459,10 +467,11 @@ You may notice that there is no way to set the font size through the diagram's c
459
467
`}
460
468
/>
461
469
```
462
-
See the (Mermaid configuration)[https://mermaid.js.org/config/schema-docs/config.html] documentation page for an exhaustive list of parameters.
463
470
471
+
See the (Mermaid configuration)[https://mermaid.js.org/config/schema-docs/config.html] documentation page for an exhaustive list of parameters.
464
472
465
473
Even though the font size has been modified, the rendered diagram's font may not appear to change size. Instead, the text size will remain a relatively similar size while the boxes and arrows appear smaller. Therefore, the sure-fire method to set a font size is to use HTML `<font size=10></font>` tags to wrap the text within a node.
0 commit comments