mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-15 06:19:24 +02:00
Compare commits
5 Commits
f06f1bacd3
...
docs/2910_
Author | SHA1 | Date | |
---|---|---|---|
![]() |
082bae36b6 | ||
![]() |
b688987f99 | ||
![]() |
cef8bfc9e8 | ||
![]() |
61fc828059 | ||
![]() |
3729772f65 |
@@ -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#_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.
|
@@ -54,14 +54,14 @@ The following are the most commonly used methods, and they are all tied to Merma
|
|||||||
|
|
||||||
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/#/getting-started?id=_3-calling-the-javascript-api),
|
### [The initialize() call](./getting-started#_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.
|
||||||
|
5
pnpm-lock.yaml
generated
5
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):
|
||||||
|
Reference in New Issue
Block a user