marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 14:59:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update n00b-syntaxReference.md

Browse Source
This commit is contained in:
Neil Cuzon
2021-05-02 00:59:57 -07:00
committed by GitHub
parent 0b3881751f
commit a942cb2711
1 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
docs/n00b-syntaxReference.md
View File

@@ -1,33 +1,50 @@
## Diagram syntax
Diagram Syntax is not too tricky and there are guides for each type of Diagram. However, it requires some precision to render them correctly.
The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical instances of using mermaid.
If you are new to mermaid, read the [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics of mermaid.
Video Tutorials can be found at the bottom of the Overview Section.
Mermaid's syntax is used mainly to create and modify diagrams.
to save diagrams, there are a couple of ways,we recommend saving the diagram's definition along with the diagram itself, to make the diagram easy to edit.
## Diagram Breaking
One should beware the use of some words or symbols that can ruin diagrams, and using avoid them.
`%%{ }%%` These are
| Diagram Breakers | Reason |Solution|
| --- | --- |---|
| **Comments** | ||
|`%%{` | Similar to [Directives](./directives.md) confuses the renderer.||
|`}%%` | Similar to [Directives](./directives.md) confuses the renderer.| To comment, just use `%%`|
| **Flow-Charts** | ||
|'end' | The word "End" can cause Flowcharts and Sequence diagrams to break |wrap them in quotation marks to prevent breakage|
| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax)| Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking graph LR|
| | ||
Below is a list of diagram types supported by mermaid and how they can be defined.
## mermaid tag
These Diagram Definitions can be entered within a \<div class=mermaid> tag.
like so :
```html
<div class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
```
## Mermaid Live Editor
You can proofread or render and download your definitions in real-time with the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
This would then offer you the following choices to download the diagram:
Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
![Flowchart](./img/DownloadChoices.png)
# Configuration
**Note:** Copying the markdown will allow you to link to your unique diagram from anywhere online.
Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid.
## Directives:
[Directives](./directives.md) allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram.
If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes
This section will introduce the different methods of configuring of the behaviors and apperances of Mermaid Diagrams.
The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
## Configuration Section in the [Live Editor](./Live-Editor.md).
Here you can edit certain values to change the behavior and appearance of the diagram.
## The [initialize()](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api) call, for when Mermaid is called via an API, or through a <script> tag.
## [Directives](./directives.md),
Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. you can pass a directive alongside your defintion inside `%%{ }%%`, either above or below your diagram defintion.
## Theme Creation:
Mermaid allows you to change [Themes](./theming.md). This is also done using [Directives](./directives.md).
An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams.