mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
Merge branch develop into next
This commit is contained in:
Reda Al Sulais
commit
f202770b70
@ -60,7 +60,7 @@ Use Mermaid with your favorite applications, check out the list of [Integrations
|
||||
|
||||
You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
|
||||
|
||||
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/n00b-gettingStarted.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
|
||||
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
|
||||
|
||||
In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
|
||||
|
||||
|
||||
@ -55,7 +55,7 @@ Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它
|
||||
Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
|
||||
你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
|
||||
|
||||
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/n00b-gettingStarted.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
|
||||
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
|
||||
|
||||
<!-- </Main description> -->
|
||||
|
||||
|
||||
@ -157,7 +157,8 @@
|
||||
"xlink",
|
||||
"yash",
|
||||
"yokozuna",
|
||||
"zenuml"
|
||||
"zenuml",
|
||||
"zune"
|
||||
],
|
||||
"patterns": [
|
||||
{ "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
|
||||
|
||||
@ -18,7 +18,11 @@ const utf8ToB64 = (str: string): string => {
|
||||
return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
|
||||
};
|
||||
|
||||
const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString();
|
||||
const batchId: string =
|
||||
'mermaid-batch-' +
|
||||
(Cypress.env('useAppli')
|
||||
? Date.now().toString()
|
||||
: Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
|
||||
|
||||
export const mermaidUrl = (
|
||||
graphStr: string,
|
||||
|
||||
@ -5,9 +5,9 @@ services:
|
||||
stdin_open: true
|
||||
tty: true
|
||||
working_dir: /mermaid
|
||||
mem_limit: '2G'
|
||||
mem_limit: '4G'
|
||||
environment:
|
||||
- NODE_OPTIONS=--max_old_space_size=2048
|
||||
- NODE_OPTIONS=--max_old_space_size=4096
|
||||
volumes:
|
||||
- ./:/mermaid
|
||||
- root_cache:/root/.cache
|
||||
|
||||
@ -32,7 +32,7 @@ The definitions that can be generated the Live-Editor are also backwards-compati
|
||||
|
||||
## 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:**
|
||||
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
>
|
||||
> ## 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
|
||||
|
||||
@ -41,7 +41,7 @@ pnpm add mermaid
|
||||
|
||||
**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:
|
||||
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
>
|
||||
> ## 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
|
||||
|
||||
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.
|
||||
|
||||
@ -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.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.
|
||||
|
||||
> 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="" />
|
||||
|
||||
@ -44,7 +44,7 @@ Mermaid allows even non-programmers to easily create detailed and diagrams throu
|
||||
[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).
|
||||
|
||||
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)
|
||||
|
||||
@ -284,9 +284,9 @@ quadrantChart
|
||||
|
||||
## 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
|
||||
|
||||
@ -402,7 +402,7 @@ Update version number in `package.json`.
|
||||
npm publish
|
||||
```
|
||||
|
||||
The above command generates files into the `dist` folder and publishes them to [npmjs.org](npmjs.org).
|
||||
The above command generates files into the `dist` folder and publishes them to [npmjs.com](https://www.npmjs.com/).
|
||||
|
||||
## Security and safe diagrams
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
>
|
||||
> ## 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
|
||||
|
||||
@ -42,7 +42,7 @@ erDiagram
|
||||
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
|
||||
|
||||
@ -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.
|
||||
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).
|
||||
|
||||
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.
|
||||
|
||||
### [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.
|
||||
|
||||
### [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.
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
# Announcements
|
||||
|
||||
## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
|
||||
## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
|
||||
|
||||
24 July 2023 · 4 mins
|
||||
23 August 2023 · 15 mins
|
||||
|
||||
Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
|
||||
Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
|
||||
|
||||
@ -6,6 +6,24 @@
|
||||
|
||||
# Blog
|
||||
|
||||
## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
|
||||
|
||||
23 August 2023 · 15 mins
|
||||
|
||||
Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
|
||||
|
||||
## [New AI chatbot now available on Mermaid Chart to simplify text-based diagram creation](https://www.mermaidchart.com/blog/posts/ai-chatbot-now-available-on-mermaid-chart-to-simplify-text-based-diagram-creation/)
|
||||
|
||||
14 August 2023 · 4 mins
|
||||
|
||||
Introducing Mermaid Chart’s new AI chatbot, a diagramming assistant that simplifies text-based diagram creation for everyone, from developers to educators, offering features to start, edit, and fix diagrams, and embodying our vision to make diagramming accessible, user-friendly, and fun.
|
||||
|
||||
## [Believe It or Not, You Still Need an Online UML Diagram Tool](https://www.mermaidchart.com/blog/posts/uml-diagram-tool/)
|
||||
|
||||
14 August 2023 · 8 mins
|
||||
|
||||
A UML diagram tool helps developers and other professionals quickly create and share UML diagrams that communicate information about complex software systems.
|
||||
|
||||
## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
|
||||
|
||||
24 July 2023 · 4 mins
|
||||
|
||||
@ -1098,7 +1098,7 @@ The icons are accessed via the syntax fa:#icon class name#.
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
B["fab:fa-twitter for peace"]
|
||||
B["fa:fa-twitter for peace"]
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner)
|
||||
B-->E(A fa:fa-camera-retro perhaps?)
|
||||
@ -1106,7 +1106,7 @@ flowchart TD
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
B["fab:fa-twitter for peace"]
|
||||
B["fa:fa-twitter for peace"]
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner)
|
||||
B-->E(A fa:fa-camera-retro perhaps?)
|
||||
|
||||
@ -12,14 +12,16 @@ import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
|
||||
|
||||
const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => {
|
||||
// Compute the position of each group on the pie:
|
||||
const pieData: D3Sections[] = Object.entries(sections).map(
|
||||
(element: [string, number]): D3Sections => {
|
||||
const pieData: D3Sections[] = Object.entries(sections)
|
||||
.map((element: [string, number]): D3Sections => {
|
||||
return {
|
||||
label: element[0],
|
||||
value: element[1],
|
||||
};
|
||||
}
|
||||
);
|
||||
})
|
||||
.sort((a: D3Sections, b: D3Sections): number => {
|
||||
return b.value - a.value;
|
||||
});
|
||||
const pie: d3.Pie<unknown, D3Sections> = d3pie<D3Sections>().value(
|
||||
(d3Section: D3Sections): number => d3Section.value
|
||||
);
|
||||
|
||||
@ -109,8 +109,8 @@ function sidebarAll() {
|
||||
collapsed: false,
|
||||
items: [
|
||||
{ text: 'About Mermaid', link: '/intro/' },
|
||||
{ text: 'Getting Started', link: '/intro/n00b-gettingStarted' },
|
||||
{ text: 'Syntax and Configuration', link: '/intro/n00b-syntaxReference' },
|
||||
{ text: 'Getting Started', link: '/intro/getting-started' },
|
||||
{ text: 'Syntax and Configuration', link: '/intro/syntax-reference' },
|
||||
],
|
||||
},
|
||||
...sidebarSyntax(),
|
||||
@ -167,7 +167,7 @@ function sidebarConfig() {
|
||||
{ text: 'Theming', link: '/config/theming' },
|
||||
{ text: 'Accessibility', link: '/config/accessibility' },
|
||||
{ text: 'Mermaid CLI', link: '/config/mermaidCLI' },
|
||||
{ text: 'Advanced usage', link: '/config/n00b-advanced' },
|
||||
{ text: 'Advanced usage', link: '/config/advanced' },
|
||||
{ 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
|
||||
'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.md', 'config/n00b-advanced.html'], // with .md
|
||||
['https://mermaid-js.github.io/mermaid/#/n00b-advanced', 'config/advanced.html'], // without .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
|
||||
'syntax/flowchart.html#a-node-in-the-form-of-a-circle',
|
||||
|
||||
@ -25,9 +25,13 @@ const getBaseFile = (url: URL): Redirect => {
|
||||
};
|
||||
|
||||
/**
|
||||
* Used to redirect old documentation pages to corresponding new pages.
|
||||
* Used to redirect old (pre-vitepress) documentation pages to corresponding new pages.
|
||||
* The key is the old documentation ID, and the value is the new documentation path.
|
||||
* No key should be added here as it already has all the old documentation IDs.
|
||||
* If you are changing a documentation page, you should update the corresponding value here, and add an entry in the urlRedirectMap below.
|
||||
*/
|
||||
const idRedirectMap: Record<string, string> = {
|
||||
// ID of the old documentation page: Path of the new documentation page
|
||||
'8.6.0_docs': '',
|
||||
accessibility: 'config/theming',
|
||||
breakingchanges: '',
|
||||
@ -50,15 +54,14 @@ const idRedirectMap: Record<string, string> = {
|
||||
mermaidcli: 'config/mermaidCLI',
|
||||
mindmap: 'syntax/mindmap',
|
||||
'more-pages': '',
|
||||
'n00b-advanced': 'config/n00b-advanced',
|
||||
'n00b-gettingstarted': 'intro/n00b-gettingStarted',
|
||||
'n00b-overview': 'intro/n00b-gettingStarted',
|
||||
'community/n00b-overview': 'intro/n00b-gettingStarted',
|
||||
'n00b-syntaxreference': 'intro/n00b-syntaxReference',
|
||||
'n00b-advanced': 'config/advanced',
|
||||
'n00b-gettingstarted': 'intro/getting-started',
|
||||
'n00b-overview': 'intro/getting-started',
|
||||
'n00b-syntaxreference': 'intro/syntax-reference',
|
||||
newdiagram: 'community/newDiagram',
|
||||
pie: 'syntax/pie',
|
||||
plugins: '',
|
||||
quickstart: 'intro/n00b-gettingStarted',
|
||||
quickstart: 'intro/getting-started',
|
||||
requirementdiagram: 'syntax/requirementDiagram',
|
||||
security: 'community/security',
|
||||
sequencediagram: 'syntax/sequenceDiagram',
|
||||
@ -74,10 +77,19 @@ const idRedirectMap: Record<string, string> = {
|
||||
|
||||
/**
|
||||
* Used to redirect pages that have been moved in the vitepress site.
|
||||
* No keys should be deleted from here.
|
||||
* If you are changing a documentation page, you should update the corresponding value here,
|
||||
* and update the entry in the idRedirectMap above if it was present
|
||||
* (No need to add new keys in idRedirectMap).
|
||||
*/
|
||||
const urlRedirectMap: Record<string, string> = {
|
||||
// Old URL: New URL
|
||||
'/misc/faq.html': 'configure/faq.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
|
||||
|
||||
Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
|
||||
Examples are provided in [Getting Started](../intro/getting-started.md)
|
||||
|
||||
**CodePen Examples:**
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Advanced n00b mermaid (Coming soon..)
|
||||
# Advanced mermaid (Coming soon..)
|
||||
|
||||
## splitting mermaid code from html
|
||||
|
||||
@ -35,7 +35,7 @@ pnpm add mermaid
|
||||
|
||||
**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:
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
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.
|
||||
|
||||
@ -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.
|
||||
|
||||
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.
|
||||
|
||||
> 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="" />
|
||||
|
||||
@ -39,7 +39,7 @@ Mermaid allows even non-programmers to easily create detailed and diagrams throu
|
||||
[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).
|
||||
|
||||
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)
|
||||
|
||||
@ -59,9 +59,9 @@ In our release process we rely heavily on visual regression tests using [applito
|
||||
|
||||
## 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
|
||||
|
||||
@ -179,7 +179,7 @@ Update version number in `package.json`.
|
||||
npm publish
|
||||
```
|
||||
|
||||
The above command generates files into the `dist` folder and publishes them to [npmjs.org](npmjs.org).
|
||||
The above command generates files into the `dist` folder and publishes them to [npmjs.com](https://www.npmjs.com/).
|
||||
|
||||
## Security and safe diagrams
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ erDiagram
|
||||
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
|
||||
|
||||
@ -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.
|
||||
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).
|
||||
|
||||
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.
|
||||
|
||||
### [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.
|
||||
|
||||
### [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.
|
||||
@ -1,7 +1,7 @@
|
||||
# Announcements
|
||||
|
||||
## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
|
||||
## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
|
||||
|
||||
24 July 2023 · 4 mins
|
||||
23 August 2023 · 15 mins
|
||||
|
||||
Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
|
||||
Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
|
||||
|
||||
@ -1,5 +1,23 @@
|
||||
# Blog
|
||||
|
||||
## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
|
||||
|
||||
23 August 2023 · 15 mins
|
||||
|
||||
Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
|
||||
|
||||
## [New AI chatbot now available on Mermaid Chart to simplify text-based diagram creation](https://www.mermaidchart.com/blog/posts/ai-chatbot-now-available-on-mermaid-chart-to-simplify-text-based-diagram-creation/)
|
||||
|
||||
14 August 2023 · 4 mins
|
||||
|
||||
Introducing Mermaid Chart’s new AI chatbot, a diagramming assistant that simplifies text-based diagram creation for everyone, from developers to educators, offering features to start, edit, and fix diagrams, and embodying our vision to make diagramming accessible, user-friendly, and fun.
|
||||
|
||||
## [Believe It or Not, You Still Need an Online UML Diagram Tool](https://www.mermaidchart.com/blog/posts/uml-diagram-tool/)
|
||||
|
||||
14 August 2023 · 8 mins
|
||||
|
||||
A UML diagram tool helps developers and other professionals quickly create and share UML diagrams that communicate information about complex software systems.
|
||||
|
||||
## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
|
||||
|
||||
24 July 2023 · 4 mins
|
||||
|
||||
@ -751,7 +751,7 @@ The icons are accessed via the syntax fa:#icon class name#.
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
B["fab:fa-twitter for peace"]
|
||||
B["fa:fa-twitter for peace"]
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner)
|
||||
B-->E(A fa:fa-camera-retro perhaps?)
|
||||
|
||||
62
pnpm-lock.yaml
generated
62
pnpm-lock.yaml
generated
@ -475,61 +475,6 @@ importers:
|
||||
specifier: ^7.0.0
|
||||
version: 7.0.0
|
||||
|
||||
packages/mermaid/src/vitepress:
|
||||
dependencies:
|
||||
'@vueuse/core':
|
||||
specifier: ^10.1.0
|
||||
version: 10.1.0(vue@3.3.4)
|
||||
jiti:
|
||||
specifier: ^1.18.2
|
||||
version: 1.18.2
|
||||
mermaid:
|
||||
specifier: workspace:^
|
||||
version: link:../..
|
||||
vue:
|
||||
specifier: ^3.2.47
|
||||
version: 3.3.4
|
||||
devDependencies:
|
||||
'@iconify-json/carbon':
|
||||
specifier: ^1.1.16
|
||||
version: 1.1.16
|
||||
'@unocss/reset':
|
||||
specifier: ^0.55.2
|
||||
version: 0.55.2
|
||||
'@vite-pwa/vitepress':
|
||||
specifier: ^0.2.0
|
||||
version: 0.2.0(vite-plugin-pwa@0.16.0)
|
||||
'@vitejs/plugin-vue':
|
||||
specifier: ^4.2.1
|
||||
version: 4.2.1(vite@4.3.9)(vue@3.3.4)
|
||||
fast-glob:
|
||||
specifier: ^3.2.12
|
||||
version: 3.2.12
|
||||
https-localhost:
|
||||
specifier: ^4.7.1
|
||||
version: 4.7.1
|
||||
pathe:
|
||||
specifier: ^1.1.0
|
||||
version: 1.1.0
|
||||
unocss:
|
||||
specifier: ^0.55.2
|
||||
version: 0.55.2(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9)
|
||||
unplugin-vue-components:
|
||||
specifier: ^0.25.0
|
||||
version: 0.25.0(rollup@2.79.1)(vue@3.3.4)
|
||||
vite:
|
||||
specifier: ^4.3.9
|
||||
version: 4.3.9(@types/node@18.16.0)
|
||||
vite-plugin-pwa:
|
||||
specifier: ^0.16.0
|
||||
version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
|
||||
vitepress:
|
||||
specifier: 1.0.0-rc.4
|
||||
version: 1.0.0-rc.4(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
|
||||
workbox-window:
|
||||
specifier: ^7.0.0
|
||||
version: 7.0.0
|
||||
|
||||
tests/webpack:
|
||||
dependencies:
|
||||
'@mermaid-js/mermaid-example-diagram':
|
||||
@ -4044,7 +3989,7 @@ packages:
|
||||
tslib:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@rollup/pluginutils': 5.0.2(rollup@2.79.1)
|
||||
'@rollup/pluginutils': 5.0.2
|
||||
resolve: 1.22.2
|
||||
typescript: 5.1.3
|
||||
dev: true
|
||||
@ -4061,7 +4006,7 @@ packages:
|
||||
rollup: 2.79.1
|
||||
dev: true
|
||||
|
||||
/@rollup/pluginutils@5.0.2(rollup@2.79.1):
|
||||
/@rollup/pluginutils@5.0.2:
|
||||
resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
peerDependencies:
|
||||
@ -4073,7 +4018,6 @@ packages:
|
||||
'@types/estree': 1.0.0
|
||||
estree-walker: 2.0.2
|
||||
picomatch: 2.3.1
|
||||
rollup: 2.79.1
|
||||
dev: true
|
||||
|
||||
/@rollup/pluginutils@5.0.3(rollup@2.79.1):
|
||||
@ -15048,7 +14992,7 @@ packages:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@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
|
||||
debug: 4.3.4(supports-color@8.1.1)
|
||||
fast-glob: 3.3.1
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user