mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-15 14:29:25 +02:00
Fix display label/path for explaining where the docs are located
This commit is contained in:
Sebastian Spier
@@ -10,7 +10,7 @@
|
||||
|
||||
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
|
||||
|
||||
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](n00b-syntaxReference).
|
||||
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](n00b-syntaxReference.md).
|
||||
|
||||
<img src="/header.png" alt="" />
|
||||
|
||||
@@ -35,7 +35,7 @@ Use Mermaid with your favorite applications, check out the list of [Integrations
|
||||
|
||||
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../community/n00b-overview.md) and [Usage](../config/usage.md).
|
||||
|
||||
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 🔌 [Plug-Ins](../misc/integrations.md)
|
||||
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../misc/integrations.md)
|
||||
|
||||
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
|
||||
|
||||
@@ -163,7 +163,7 @@ Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
```
|
||||
|
||||
### Git graph
|
||||
### [Git graph](../syntax/gitgraph.md)
|
||||
|
||||
```mermaid-example
|
||||
gitGraph
|
||||
@@ -237,9 +237,9 @@ journey
|
||||
|
||||
## Installation
|
||||
|
||||
**In depth guides and examples can be found at [Getting Started](n00b-gettingStarted) and [Usage](../config/usage).**
|
||||
**In depth guides and examples can be found at [Getting Started](./n00b-gettingStarted.md) and [Usage](../config/usage.md).**
|
||||
|
||||
**It would also be helpful to learn more about mermaid's [Syntax](n00b-syntaxReference).**
|
||||
**It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).**
|
||||
|
||||
### CDN
|
||||
|
||||
@@ -261,7 +261,7 @@ To Deploy Mermaid:
|
||||
- Yarn: `yarn add mermaid`
|
||||
- Pnpm: `pnpm add mermaid`
|
||||
|
||||
### [Mermaid API](../config/setup/README):
|
||||
### [Mermaid API](../config/setup/README.md):
|
||||
|
||||
**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**
|
||||
|
||||
@@ -274,7 +274,7 @@ To Deploy Mermaid:
|
||||
|
||||
**Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
|
||||
|
||||
**Examples can be found at** [Other examples](../syntax/examples)
|
||||
**Examples can be found at** [Other examples](../syntax/examples.md)
|
||||
|
||||
## Sibling projects
|
||||
|
||||
|
||||
@@ -53,7 +53,7 @@ graph TD
|
||||
|
||||
In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
|
||||
|
||||
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](../config/n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README) page.
|
||||
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](../config/n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -42,19 +42,19 @@ erDiagram
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
```
|
||||
|
||||
The [Getting Started](n00b-gettingStarted) section can also provide some practical examples of mermaid syntax.
|
||||
The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
|
||||
|
||||
## Diagram Breaking
|
||||
|
||||
One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.
|
||||
|
||||
| Diagram Breakers | Reason | Solution |
|
||||
| -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------- |
|
||||
| **Comments** | | |
|
||||
| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". |
|
||||
| **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 |
|
||||
| Diagram Breakers | Reason | Solution |
|
||||
| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------- |
|
||||
| **Comments** | | |
|
||||
| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". |
|
||||
| **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](../syntax/flowchart.md?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking |
|
||||
|
||||
### Mermaid Live Editor
|
||||
|
||||
@@ -64,9 +64,9 @@ Now, that you've seen what you should not add to your diagrams, you can play aro
|
||||
|
||||
Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments.
|
||||
|
||||
If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/setup/README) here. It includes themes.
|
||||
If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/setup/README.md) here. It includes themes.
|
||||
This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams.
|
||||
The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](n00b-gettingStarted) methods.
|
||||
The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
|
||||
|
||||
### Configuration Section in the [Live Editor](https://mermaid.live).
|
||||
|
||||
|
||||
Reference in New Issue
Block a user