mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update n00b-syntaxReference.md

This commit is contained in:
Neil Cuzon 2021-05-02 01:18:52 -07:00 committed by GitHub
parent 99f5e9fc9f
commit 7c346df471
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/n00b-syntaxReference.md
View File

@ -1,48 +1,48 @@
## 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.
# Diagram Syntax
Syntax is the next part of Mermaid. Syntax, together with Deployment and Configuration constitute the whole of Mermaid.
Mermaid's Syntax is not too tricky and there are thorough 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 examples of mermaid syntax. The next section will also
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.
One should beware the use of some words or symbols that can break diagrams, and using avoid them. Often these words or symbols only affect specific types of
`%%{ }%%` 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 `%%`|
|[`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](./directives.md) confuses the renderer.|To comment, just use `%%`||
| | Similar to [Directives](./directives.md) confuses the renderer.|
| **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|
| | ||
## Mermaid Live Editor
### Mermaid Live Editor
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).
# Configuration
Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid.
Configuration is the third part of Mermaid, after deployment and syntax.
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.
### 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.
### 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),
### [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:
### [Theme Manipulation](./theming.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.