marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-13 12:29:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update n00b-gettingStarted.md

Browse Source
This commit is contained in:
Neil Cuzon
2021-05-02 22:23:19 -07:00
committed by GitHub
parent 1c7710d0ab
commit 7c249e9f7a
1 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docs/n00b-gettingStarted.md
View File

@@ -21,26 +21,25 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn
## 1. Using [The Live Editor](https://mermaidjs.github.io/mermaid-live-editor). ## 1. Using [The Live Editor](https://mermaidjs.github.io/mermaid-live-editor).
![Flowchart](./img/Live-Editor-Usage.png) ![EditingProcess](./img/Editing-process.png )
In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it. In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
**We recommend that you save your diagram code, in order to make it available for edits and modifications further down the line.** The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](./n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](Setup.md) page.
![Flowchart](./img/DiagramDefinition.png)
**Saving a Diagram:** ![Code,Config and Preview](./img/Code-Preview-Config.png)
### Saving a Diagram:
You may choose any of the methods below, to save it You may choose any of the methods below, to save it
**We recommend that you save your diagram code on top of any method you choose, in order to make edits and modifications further down the line.**
![Flowchart](./img/Live-Editor-Choices.png) ![Flowchart](./img/Live-Editor-Choices.png)
**Configuration** ### Editing your diagrams
Editing is as easy as pasting your **Diagram code**, into the `code` section of the `Live Editor`.
*The Configuration Section* is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](./n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](Setup.md) page.
![Flowchart](./img/Configuration.png)
There are some Syntax,
## 2. Using Mermaid Plugins: ## 2. Using Mermaid Plugins: