mirror of
				https://github.com/mermaid-js/mermaid.git
				synced 2025-11-04 12:54:08 +01:00 
			
		
		
		
	Merge pull request #4767 from nirname/docs/2910_renaming-docs-and-fixes
Docs/2910 Remove n00b and fix some docs
This commit is contained in:
		@@ -5,9 +5,9 @@ services:
 | 
				
			|||||||
    stdin_open: true
 | 
					    stdin_open: true
 | 
				
			||||||
    tty: true
 | 
					    tty: true
 | 
				
			||||||
    working_dir: /mermaid
 | 
					    working_dir: /mermaid
 | 
				
			||||||
    mem_limit: '2G'
 | 
					    mem_limit: '4G'
 | 
				
			||||||
    environment:
 | 
					    environment:
 | 
				
			||||||
      - NODE_OPTIONS=--max_old_space_size=2048
 | 
					      - NODE_OPTIONS=--max_old_space_size=4096
 | 
				
			||||||
    volumes:
 | 
					    volumes:
 | 
				
			||||||
      - ./:/mermaid
 | 
					      - ./:/mermaid
 | 
				
			||||||
      - root_cache:/root/.cache
 | 
					      - root_cache:/root/.cache
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -32,7 +32,7 @@ The definitions that can be generated the Live-Editor are also backwards-compati
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
## Mermaid with HTML
 | 
					## Mermaid with HTML
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
 | 
					Examples are provided in [Getting Started](../intro/getting-started.md)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
**CodePen Examples:**
 | 
					**CodePen Examples:**
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -2,9 +2,9 @@
 | 
				
			|||||||
>
 | 
					>
 | 
				
			||||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 | 
					> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 | 
				
			||||||
>
 | 
					>
 | 
				
			||||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/n00b-advanced.md](../../packages/mermaid/src/docs/config/n00b-advanced.md).
 | 
					> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/advanced.md](../../packages/mermaid/src/docs/config/advanced.md).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# Advanced n00b mermaid (Coming soon..)
 | 
					# Advanced mermaid (Coming soon..)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## splitting mermaid code from html
 | 
					## splitting mermaid code from html
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -41,7 +41,7 @@ pnpm add mermaid
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
**Hosting mermaid on a web page:**
 | 
					**Hosting mermaid on a web page:**
 | 
				
			||||||
 | 
					
 | 
				
			||||||
> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md)
 | 
					> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/getting-started.md)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
The easiest way to integrate mermaid on a web page requires two elements:
 | 
					The easiest way to integrate mermaid on a web page requires two elements:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -2,13 +2,13 @@
 | 
				
			|||||||
>
 | 
					>
 | 
				
			||||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 | 
					> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 | 
				
			||||||
>
 | 
					>
 | 
				
			||||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/n00b-gettingStarted.md](../../packages/mermaid/src/docs/intro/n00b-gettingStarted.md).
 | 
					> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/getting-started.md](../../packages/mermaid/src/docs/intro/getting-started.md).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# A Mermaid User-Guide for Beginners
 | 
					# A Mermaid User-Guide for Beginners
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Mermaid is composed of three parts: Deployment, Syntax and Configuration.
 | 
					Mermaid is composed of three parts: Deployment, Syntax and Configuration.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
This section talks about the different ways to deploy Mermaid. Learning the [Syntax](n00b-syntaxReference.md) would be of great help to the beginner.
 | 
					This section talks about the different ways to deploy Mermaid. Learning the [Syntax](syntax-reference.md) would be of great help to the beginner.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
 | 
					> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -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.
 | 
					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.md) 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/advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
 | 
				
			||||||
 | 
					
 | 
				
			||||||

 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -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.
 | 
					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.md).
 | 
					> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](syntax-reference.md).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<img src="/header.png" alt="" />
 | 
					<img src="/header.png" alt="" />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -44,7 +44,7 @@ Mermaid allows even non-programmers to easily create detailed and diagrams throu
 | 
				
			|||||||
[Tutorials](../config/Tutorials.md) has video tutorials.
 | 
					[Tutorials](../config/Tutorials.md) has video tutorials.
 | 
				
			||||||
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).
 | 
					Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/n00b-gettingStarted.md) and [Usage](../config/usage.md).
 | 
					For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/getting-started.md) and [Usage](../config/usage.md).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)
 | 
					🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -284,9 +284,9 @@ quadrantChart
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
## Installation
 | 
					## Installation
 | 
				
			||||||
 | 
					
 | 
				
			||||||
**In depth guides and examples can be found at [Getting Started](./n00b-gettingStarted.md) and [Usage](../config/usage.md).**
 | 
					**In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).**
 | 
				
			||||||
 | 
					
 | 
				
			||||||
**It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).**
 | 
					**It would also be helpful to learn more about mermaid's [Syntax](./syntax-reference.md).**
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### CDN
 | 
					### CDN
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -2,7 +2,7 @@
 | 
				
			|||||||
>
 | 
					>
 | 
				
			||||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 | 
					> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 | 
				
			||||||
>
 | 
					>
 | 
				
			||||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/n00b-syntaxReference.md](../../packages/mermaid/src/docs/intro/n00b-syntaxReference.md).
 | 
					> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/syntax-reference.md](../../packages/mermaid/src/docs/intro/syntax-reference.md).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# Diagram Syntax
 | 
					# Diagram Syntax
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -42,7 +42,7 @@ erDiagram
 | 
				
			|||||||
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 | 
					          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
 | 
					The [Getting Started](./getting-started.md) section can also provide some practical examples of mermaid syntax.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## Diagram Breaking
 | 
					## Diagram Breaking
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -66,20 +66,20 @@ Configuration is the third part of Mermaid, after deployment and syntax. It deal
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
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.
 | 
					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.
 | 
					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.md) methods.
 | 
					The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./getting-started.md) methods.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### Configuration Section in the [Live Editor](https://mermaid.live).
 | 
					### Configuration Section in the [Live Editor](https://mermaid.live).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Here you can edit certain values to change the behavior and appearance of the diagram.
 | 
					Here you can edit certain values to change the behavior and appearance of the diagram.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### [The initialize() call](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api),
 | 
					### [The initialize() call](./getting-started.md#_3-calling-the-javascript-api)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Used when Mermaid is called via an API, or through a `<script>` tag.
 | 
					Used when Mermaid is called via an API, or through a `<script>` tag.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### [Directives](../config/directives.md),
 | 
					### [Directives](../config/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 definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
 | 
					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 definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### [Theme Manipulation](../config/theming.md):
 | 
					### [Theme Manipulation](../config/theming.md)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
 | 
					An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
 | 
				
			||||||
@@ -109,8 +109,8 @@ function sidebarAll() {
 | 
				
			|||||||
      collapsed: false,
 | 
					      collapsed: false,
 | 
				
			||||||
      items: [
 | 
					      items: [
 | 
				
			||||||
        { text: 'About Mermaid', link: '/intro/' },
 | 
					        { text: 'About Mermaid', link: '/intro/' },
 | 
				
			||||||
        { text: 'Getting Started', link: '/intro/n00b-gettingStarted' },
 | 
					        { text: 'Getting Started', link: '/intro/getting-started' },
 | 
				
			||||||
        { text: 'Syntax and Configuration', link: '/intro/n00b-syntaxReference' },
 | 
					        { text: 'Syntax and Configuration', link: '/intro/syntax-reference' },
 | 
				
			||||||
      ],
 | 
					      ],
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    ...sidebarSyntax(),
 | 
					    ...sidebarSyntax(),
 | 
				
			||||||
@@ -167,7 +167,7 @@ function sidebarConfig() {
 | 
				
			|||||||
        { text: 'Theming', link: '/config/theming' },
 | 
					        { text: 'Theming', link: '/config/theming' },
 | 
				
			||||||
        { text: 'Accessibility', link: '/config/accessibility' },
 | 
					        { text: 'Accessibility', link: '/config/accessibility' },
 | 
				
			||||||
        { text: 'Mermaid CLI', link: '/config/mermaidCLI' },
 | 
					        { text: 'Mermaid CLI', link: '/config/mermaidCLI' },
 | 
				
			||||||
        { text: 'Advanced usage', link: '/config/n00b-advanced' },
 | 
					        { text: 'Advanced usage', link: '/config/advanced' },
 | 
				
			||||||
        { text: 'FAQ', link: '/config/faq' },
 | 
					        { text: 'FAQ', link: '/config/faq' },
 | 
				
			||||||
      ],
 | 
					      ],
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -19,8 +19,17 @@ test.each([
 | 
				
			|||||||
    'https://mermaid-js.github.io/mermaid/#/flowchart?another=test&id=my-id&one=more', // with multiple params
 | 
					    'https://mermaid-js.github.io/mermaid/#/flowchart?another=test&id=my-id&one=more', // with multiple params
 | 
				
			||||||
    'syntax/flowchart.html#my-id',
 | 
					    'syntax/flowchart.html#my-id',
 | 
				
			||||||
  ],
 | 
					  ],
 | 
				
			||||||
  ['https://mermaid-js.github.io/mermaid/#/n00b-advanced', 'config/n00b-advanced.html'], // without .md
 | 
					  ['https://mermaid-js.github.io/mermaid/#/n00b-advanced', 'config/advanced.html'], // without .md
 | 
				
			||||||
  ['https://mermaid-js.github.io/mermaid/#/n00b-advanced.md', 'config/n00b-advanced.html'], // with .md
 | 
					  ['https://mermaid-js.github.io/mermaid/#/n00b-advanced.md', 'config/advanced.html'], // with .md
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  ['https://mermaid-js.github.io/mermaid/#/n00b-gettingstarted', 'intro/getting-started.html'],
 | 
				
			||||||
 | 
					  ['https://mermaid-js.github.io/mermaid/#/n00b-gettingstarted.md', 'intro/getting-started.html'],
 | 
				
			||||||
 | 
					  ['https://mermaid-js.github.io/mermaid/#/n00b-overview', 'intro/getting-started.html'],
 | 
				
			||||||
 | 
					  ['https://mermaid-js.github.io/mermaid/#/n00b-overview.md', 'intro/getting-started.html'],
 | 
				
			||||||
 | 
					  ['https://mermaid-js.github.io/mermaid/#/n00b-syntaxreference', 'intro/syntax-reference.html'],
 | 
				
			||||||
 | 
					  ['https://mermaid-js.github.io/mermaid/#/n00b-syntaxreference.md', 'intro/syntax-reference.html'],
 | 
				
			||||||
 | 
					  ['https://mermaid-js.github.io/mermaid/#/quickstart', 'intro/getting-started.html'],
 | 
				
			||||||
 | 
					  ['https://mermaid-js.github.io/mermaid/#/quickstart.md', 'intro/getting-started.html'],
 | 
				
			||||||
  [
 | 
					  [
 | 
				
			||||||
    'https://mermaid-js.github.io/mermaid/#/flowchart?id=a-node-in-the-form-of-a-circle', // with id, without .md
 | 
					    'https://mermaid-js.github.io/mermaid/#/flowchart?id=a-node-in-the-form-of-a-circle', // with id, without .md
 | 
				
			||||||
    'syntax/flowchart.html#a-node-in-the-form-of-a-circle',
 | 
					    'syntax/flowchart.html#a-node-in-the-form-of-a-circle',
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -54,15 +54,14 @@ const idRedirectMap: Record<string, string> = {
 | 
				
			|||||||
  mermaidcli: 'config/mermaidCLI',
 | 
					  mermaidcli: 'config/mermaidCLI',
 | 
				
			||||||
  mindmap: 'syntax/mindmap',
 | 
					  mindmap: 'syntax/mindmap',
 | 
				
			||||||
  'more-pages': '',
 | 
					  'more-pages': '',
 | 
				
			||||||
  'n00b-advanced': 'config/n00b-advanced',
 | 
					  'n00b-advanced': 'config/advanced',
 | 
				
			||||||
  'n00b-gettingstarted': 'intro/n00b-gettingStarted',
 | 
					  'n00b-gettingstarted': 'intro/getting-started',
 | 
				
			||||||
  'n00b-overview': 'intro/n00b-gettingStarted',
 | 
					  'n00b-overview': 'intro/getting-started',
 | 
				
			||||||
  'community/n00b-overview': 'intro/n00b-gettingStarted',
 | 
					  'n00b-syntaxreference': 'intro/syntax-reference',
 | 
				
			||||||
  'n00b-syntaxreference': 'intro/n00b-syntaxReference',
 | 
					 | 
				
			||||||
  newdiagram: 'community/newDiagram',
 | 
					  newdiagram: 'community/newDiagram',
 | 
				
			||||||
  pie: 'syntax/pie',
 | 
					  pie: 'syntax/pie',
 | 
				
			||||||
  plugins: '',
 | 
					  plugins: '',
 | 
				
			||||||
  quickstart: 'intro/n00b-gettingStarted',
 | 
					  quickstart: 'intro/getting-started',
 | 
				
			||||||
  requirementdiagram: 'syntax/requirementDiagram',
 | 
					  requirementdiagram: 'syntax/requirementDiagram',
 | 
				
			||||||
  security: 'community/security',
 | 
					  security: 'community/security',
 | 
				
			||||||
  sequencediagram: 'syntax/sequenceDiagram',
 | 
					  sequencediagram: 'syntax/sequenceDiagram',
 | 
				
			||||||
@@ -87,6 +86,10 @@ const urlRedirectMap: Record<string, string> = {
 | 
				
			|||||||
  // Old URL: New URL
 | 
					  // Old URL: New URL
 | 
				
			||||||
  '/misc/faq.html': 'configure/faq.html',
 | 
					  '/misc/faq.html': 'configure/faq.html',
 | 
				
			||||||
  '/syntax/c4c.html': 'syntax/c4.html',
 | 
					  '/syntax/c4c.html': 'syntax/c4.html',
 | 
				
			||||||
 | 
					  '/config/n00b-advanced.html': 'config/advanced',
 | 
				
			||||||
 | 
					  '/intro/n00b-gettingStarted.html': 'intro/getting-started',
 | 
				
			||||||
 | 
					  '/intro/n00b-syntaxReference.html': 'intro/syntax-reference',
 | 
				
			||||||
 | 
					  '/community/n00b-overview.html': 'intro/getting-started',
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/**
 | 
					/**
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -26,7 +26,7 @@ The definitions that can be generated the Live-Editor are also backwards-compati
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
## Mermaid with HTML
 | 
					## Mermaid with HTML
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
 | 
					Examples are provided in [Getting Started](../intro/getting-started.md)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
**CodePen Examples:**
 | 
					**CodePen Examples:**
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,4 +1,4 @@
 | 
				
			|||||||
# Advanced n00b mermaid (Coming soon..)
 | 
					# Advanced mermaid (Coming soon..)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## splitting mermaid code from html
 | 
					## splitting mermaid code from html
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -35,7 +35,7 @@ pnpm add mermaid
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
**Hosting mermaid on a web page:**
 | 
					**Hosting mermaid on a web page:**
 | 
				
			||||||
 | 
					
 | 
				
			||||||
> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md)
 | 
					> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/getting-started.md)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
The easiest way to integrate mermaid on a web page requires two elements:
 | 
					The easiest way to integrate mermaid on a web page requires two elements:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -2,7 +2,7 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
Mermaid is composed of three parts: Deployment, Syntax and Configuration.
 | 
					Mermaid is composed of three parts: Deployment, Syntax and Configuration.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
This section talks about the different ways to deploy Mermaid. Learning the [Syntax](n00b-syntaxReference.md) would be of great help to the beginner.
 | 
					This section talks about the different ways to deploy Mermaid. Learning the [Syntax](syntax-reference.md) would be of great help to the beginner.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
 | 
					> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -36,7 +36,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.
 | 
					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.md) 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/advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
 | 
				
			||||||
 | 
					
 | 
				
			||||||

 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -4,7 +4,7 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
 | 
					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.md).
 | 
					> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](syntax-reference.md).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<img src="/header.png" alt="" />
 | 
					<img src="/header.png" alt="" />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -39,7 +39,7 @@ Mermaid allows even non-programmers to easily create detailed and diagrams throu
 | 
				
			|||||||
[Tutorials](../config/Tutorials.md) has video tutorials.
 | 
					[Tutorials](../config/Tutorials.md) has video tutorials.
 | 
				
			||||||
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).
 | 
					Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/n00b-gettingStarted.md) and [Usage](../config/usage.md).
 | 
					For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/getting-started.md) and [Usage](../config/usage.md).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)
 | 
					🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -59,9 +59,9 @@ In our release process we rely heavily on visual regression tests using [applito
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
## Installation
 | 
					## Installation
 | 
				
			||||||
 | 
					
 | 
				
			||||||
**In depth guides and examples can be found at [Getting Started](./n00b-gettingStarted.md) and [Usage](../config/usage.md).**
 | 
					**In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).**
 | 
				
			||||||
 | 
					
 | 
				
			||||||
**It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).**
 | 
					**It would also be helpful to learn more about mermaid's [Syntax](./syntax-reference.md).**
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### CDN
 | 
					### CDN
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -24,7 +24,7 @@ erDiagram
 | 
				
			|||||||
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 | 
					          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
 | 
					The [Getting Started](./getting-started.md) section can also provide some practical examples of mermaid syntax.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## Diagram Breaking
 | 
					## Diagram Breaking
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -48,20 +48,20 @@ Configuration is the third part of Mermaid, after deployment and syntax. It deal
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
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.
 | 
					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.
 | 
					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.md) methods.
 | 
					The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./getting-started.md) methods.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### Configuration Section in the [Live Editor](https://mermaid.live).
 | 
					### Configuration Section in the [Live Editor](https://mermaid.live).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Here you can edit certain values to change the behavior and appearance of the diagram.
 | 
					Here you can edit certain values to change the behavior and appearance of the diagram.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### [The initialize() call](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api),
 | 
					### [The initialize() call](./getting-started.md#_3-calling-the-javascript-api)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Used when Mermaid is called via an API, or through a `<script>` tag.
 | 
					Used when Mermaid is called via an API, or through a `<script>` tag.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### [Directives](../config/directives.md),
 | 
					### [Directives](../config/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 definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
 | 
					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 definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### [Theme Manipulation](../config/theming.md):
 | 
					### [Theme Manipulation](../config/theming.md)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
 | 
					An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
 | 
				
			||||||
							
								
								
									
										7
									
								
								pnpm-lock.yaml
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										7
									
								
								pnpm-lock.yaml
									
									
									
										generated
									
									
									
								
							@@ -4050,7 +4050,7 @@ packages:
 | 
				
			|||||||
      tslib:
 | 
					      tslib:
 | 
				
			||||||
        optional: true
 | 
					        optional: true
 | 
				
			||||||
    dependencies:
 | 
					    dependencies:
 | 
				
			||||||
      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
 | 
					      '@rollup/pluginutils': 5.0.2
 | 
				
			||||||
      resolve: 1.22.2
 | 
					      resolve: 1.22.2
 | 
				
			||||||
      typescript: 5.1.3
 | 
					      typescript: 5.1.3
 | 
				
			||||||
    dev: true
 | 
					    dev: true
 | 
				
			||||||
@@ -4067,7 +4067,7 @@ packages:
 | 
				
			|||||||
      rollup: 2.79.1
 | 
					      rollup: 2.79.1
 | 
				
			||||||
    dev: true
 | 
					    dev: true
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  /@rollup/pluginutils@5.0.2(rollup@2.79.1):
 | 
					  /@rollup/pluginutils@5.0.2:
 | 
				
			||||||
    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
 | 
					    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
 | 
				
			||||||
    engines: {node: '>=14.0.0'}
 | 
					    engines: {node: '>=14.0.0'}
 | 
				
			||||||
    peerDependencies:
 | 
					    peerDependencies:
 | 
				
			||||||
@@ -4079,7 +4079,6 @@ packages:
 | 
				
			|||||||
      '@types/estree': 1.0.0
 | 
					      '@types/estree': 1.0.0
 | 
				
			||||||
      estree-walker: 2.0.2
 | 
					      estree-walker: 2.0.2
 | 
				
			||||||
      picomatch: 2.3.1
 | 
					      picomatch: 2.3.1
 | 
				
			||||||
      rollup: 2.79.1
 | 
					 | 
				
			||||||
    dev: true
 | 
					    dev: true
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  /@rollup/pluginutils@5.0.3(rollup@2.79.1):
 | 
					  /@rollup/pluginutils@5.0.3(rollup@2.79.1):
 | 
				
			||||||
@@ -15055,7 +15054,7 @@ packages:
 | 
				
			|||||||
        optional: true
 | 
					        optional: true
 | 
				
			||||||
    dependencies:
 | 
					    dependencies:
 | 
				
			||||||
      '@antfu/utils': 0.7.5
 | 
					      '@antfu/utils': 0.7.5
 | 
				
			||||||
      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
 | 
					      '@rollup/pluginutils': 5.0.3(rollup@2.79.1)
 | 
				
			||||||
      chokidar: 3.5.3
 | 
					      chokidar: 3.5.3
 | 
				
			||||||
      debug: 4.3.4(supports-color@8.1.1)
 | 
					      debug: 4.3.4(supports-color@8.1.1)
 | 
				
			||||||
      fast-glob: 3.3.1
 | 
					      fast-glob: 3.3.1
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user