mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-15 06:19:24 +02:00
Merge branch 'mermaid-js:develop' into feature/3250/add_vertline_to_gantt_plot
This commit is contained in:
Megan Triplett
@@ -497,14 +497,14 @@ This is a danger alert
|
||||
|
||||
### Navigation
|
||||
|
||||
If you want to propose changes to how the documentation is _organized_, such as adding a new section or re-arranging or renaming a section, you must update the **sidebar navigation**, which is defined in [the vitepress config](../.vitepress/config.ts). The same goes to **topbar**.
|
||||
If you want to propose changes to how the documentation is _organized_, such as adding a new section or re-arranging or renaming a section, you must update the **sidebar navigation**, which is defined in [the vitepress config](../.vitepress/config.ts). The same goes for **topbar**.
|
||||
|
||||
### Build Docs
|
||||
|
||||
The content of `/docs` folder is built with Github Actions.
|
||||
The content of `/docs` folder is built with GitHub Actions.
|
||||
|
||||
> **Warning**
|
||||
> So as to allow automatic compilation of documentation pages you have to enable Github Actions on your fork first
|
||||
> So as to allow automatic compilation of documentation pages you have to enable GitHub Actions on your fork first
|
||||
|
||||
## Submit your pull request
|
||||
|
||||
|
||||
@@ -251,12 +251,12 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
|
||||
|
||||
```
|
||||
|
||||
##### Gitgraph
|
||||
##### GitGraph
|
||||
|
||||
```mermaid-example
|
||||
gitGraph
|
||||
accTitle: My Gitgraph Accessibility Title
|
||||
accDescr: My Gitgraph Accessibility Description
|
||||
accTitle: My GitGraph Accessibility Title
|
||||
accDescr: My GitGraph Accessibility Description
|
||||
|
||||
commit
|
||||
commit
|
||||
@@ -273,8 +273,8 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
|
||||
|
||||
```mermaid
|
||||
gitGraph
|
||||
accTitle: My Gitgraph Accessibility Title
|
||||
accDescr: My Gitgraph Accessibility Description
|
||||
accTitle: My GitGraph Accessibility Title
|
||||
accDescr: My GitGraph Accessibility Description
|
||||
|
||||
commit
|
||||
commit
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.
|
||||
|
||||
Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, the `init` directive is used.
|
||||
Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, frontmatter config is used.
|
||||
|
||||
## Available Themes
|
||||
|
||||
@@ -37,18 +37,24 @@ mermaid.initialize({
|
||||
|
||||
## Diagram-specific Themes
|
||||
|
||||
To customize the theme of an individual diagram, use the `init` directive.
|
||||
To customize the theme of an individual diagram, use frontmatter config.
|
||||
|
||||
Example of `init` directive setting the `theme` to `forest`:
|
||||
Example of frontmatter config setting the `theme` to `forest`:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'theme':'forest'}}%%
|
||||
---
|
||||
config:
|
||||
theme: 'forest'
|
||||
---
|
||||
graph TD
|
||||
a --> b
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'theme':'forest'}}%%
|
||||
---
|
||||
config:
|
||||
theme: 'forest'
|
||||
---
|
||||
graph TD
|
||||
a --> b
|
||||
```
|
||||
@@ -57,30 +63,28 @@ Example of `init` directive setting the `theme` to `forest`:
|
||||
|
||||
## Customizing Themes with `themeVariables`
|
||||
|
||||
To make a custom theme, modify `themeVariables` via `init`.
|
||||
To make a custom theme, modify `themeVariables` via frontmatter config.
|
||||
|
||||
You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
|
||||
|
||||
| Parameter | Description | Type | Properties |
|
||||
| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- |
|
||||
| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
|
||||
| Parameter | Description | Type | Properties |
|
||||
| -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- |
|
||||
| themeVariables | Modifiable with frontmatter config | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
|
||||
|
||||
Example of modifying `themeVariables` using the `init` directive:
|
||||
Example of modifying `themeVariables` using frontmatter config:
|
||||
|
||||
```mermaid-example
|
||||
%%{
|
||||
init: {
|
||||
'theme': 'base',
|
||||
'themeVariables': {
|
||||
'primaryColor': '#BB2528',
|
||||
'primaryTextColor': '#fff',
|
||||
'primaryBorderColor': '#7C0000',
|
||||
'lineColor': '#F8B229',
|
||||
'secondaryColor': '#006100',
|
||||
'tertiaryColor': '#fff'
|
||||
}
|
||||
}
|
||||
}%%
|
||||
---
|
||||
config:
|
||||
theme: 'base'
|
||||
themeVariables:
|
||||
primaryColor: '#BB2528'
|
||||
primaryTextColor: '#fff'
|
||||
primaryBorderColor: '#7C0000'
|
||||
lineColor: '#F8B229'
|
||||
secondaryColor: '#006100'
|
||||
tertiaryColor: '#fff'
|
||||
---
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
@@ -98,19 +102,17 @@ Example of modifying `themeVariables` using the `init` directive:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{
|
||||
init: {
|
||||
'theme': 'base',
|
||||
'themeVariables': {
|
||||
'primaryColor': '#BB2528',
|
||||
'primaryTextColor': '#fff',
|
||||
'primaryBorderColor': '#7C0000',
|
||||
'lineColor': '#F8B229',
|
||||
'secondaryColor': '#006100',
|
||||
'tertiaryColor': '#fff'
|
||||
}
|
||||
}
|
||||
}%%
|
||||
---
|
||||
config:
|
||||
theme: 'base'
|
||||
themeVariables:
|
||||
primaryColor: '#BB2528'
|
||||
primaryTextColor: '#fff'
|
||||
primaryBorderColor: '#7C0000'
|
||||
lineColor: '#F8B229'
|
||||
secondaryColor: '#006100'
|
||||
tertiaryColor: '#fff'
|
||||
---
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
|
||||
@@ -115,6 +115,8 @@ Content Management Systems/Enterprise Content Management
|
||||
- [Grav CMS](https://getgrav.org/)
|
||||
- [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
|
||||
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
|
||||
- [Tiki](https://tiki.org)
|
||||
- [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
|
||||
- [VitePress](https://vitepress.vuejs.org/)
|
||||
- [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
|
||||
- [VuePress](https://vuepress.vuejs.org/)
|
||||
|
||||
@@ -49,7 +49,7 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
|
||||
|
||||
🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/contributing.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)
|
||||
|
||||
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/mermaid-js/mermaid/issues/866).
|
||||
> 🖖 Keep a steady pulse: [mermaid needs more Collaborators](https://github.com/mermaid-js/mermaid/issues/866).
|
||||
|
||||
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
||||
|
||||
@@ -437,7 +437,7 @@ For public sites, it can be precarious to retrieve text from users on the intern
|
||||
|
||||
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
|
||||
|
||||
_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
|
||||
_Unfortunately you cannot have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
|
||||
|
||||
## Reporting vulnerabilities
|
||||
|
||||
|
||||
@@ -14,7 +14,11 @@ Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid.live)
|
||||
|
||||
## Syntax Structure
|
||||
|
||||
One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate.
|
||||
One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate. The only exception to this a [Frontmatter](#frontmatter-for-diagram-code) configuration.
|
||||
|
||||
Line comments can ignore anything on the line after '%% '.
|
||||
|
||||
Unknown words and misspellings will break a diagram, while parameters silently fail.
|
||||
|
||||
**Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it.
|
||||
|
||||
@@ -72,10 +76,50 @@ 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.
|
||||
|
||||
Each of these techniques are functionally equivalent, but better for different deployments.
|
||||
|
||||
### [The initialize() call](./getting-started.md#_3-calling-the-javascript-api)
|
||||
|
||||
Used when Mermaid is called via an API, or through a `<script>` tag.
|
||||
|
||||
### Frontmatter for diagram code
|
||||
|
||||
Frontmatter is the term for adding YAML metadata at the start of code. This allows for reconfiguration of a diagram before it is rendered. You can pass metadata Frontmatter with your definition by adding `---` to the lines before and after the definition. This 'triple dash' MUST be the only character on the first line.
|
||||
|
||||
Frontmatter uses YAML syntax. It requires any indentation to be consistent and settings are case sensitive. Mermaid will silently ignore misspelling, but badly formed parameters will break the diagram.
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
title: Frontmatter Example
|
||||
displayMode: compact
|
||||
config:
|
||||
theme: forest
|
||||
gantt:
|
||||
useWidth: 400
|
||||
compact: true
|
||||
---
|
||||
gantt
|
||||
section Waffle
|
||||
Iron : 1982, 3y
|
||||
House : 1986, 3y
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: Frontmatter Example
|
||||
displayMode: compact
|
||||
config:
|
||||
theme: forest
|
||||
gantt:
|
||||
useWidth: 400
|
||||
compact: true
|
||||
---
|
||||
gantt
|
||||
section Waffle
|
||||
Iron : 1982, 3y
|
||||
House : 1986, 3y
|
||||
```
|
||||
|
||||
### [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.
|
||||
@@ -192,9 +236,10 @@ flowchart LR
|
||||
B -->|Option 1| C[Path 1]
|
||||
B -->|Option 2| D[Path 2]
|
||||
|
||||
#### Using Dagre Layout with Classic Look:
|
||||
```
|
||||
|
||||
#### Using Dagre Layout with Classic Look:
|
||||
|
||||
Another example:
|
||||
|
||||
```
|
||||
|
||||
@@ -16,7 +16,7 @@ Discover how the latest update to the Mermaid Visual Editor transforms class dia
|
||||
|
||||
1/16/2025 • 6 mins
|
||||
|
||||
Entity relationship (ER) diagrams are a cornerstone of database design, providing a blueprint for modeling your database and enabling clear communication across functions in your organization. As data volumes continue to soar and as AI models demand clean, well-organized data, ER diagrams have become more vital than ever. You can now quickly build ER diagrams with Mermaid Chart, Mermaid AI to Kickstart and fine tune your diagrams . From e-commerce payment flows to social media interactions and healthcare systems, ER diagrams are powering modern, data-driven environments.
|
||||
Entity relationship (ER) diagrams are a cornerstone of database design, providing a blueprint for modeling your database and enabling clear communication across functions in your organization. As data volumes continue to soar and as AI models demand clean, well-organized data, ER diagrams have become more vital than ever. You can now quickly build ER diagrams with Mermaid Chart, Mermaid AI to kick-start and fine tune your diagrams . From e-commerce payment flows to social media interactions and healthcare systems, ER diagrams are powering modern, data-driven environments.
|
||||
|
||||
## [Mermaid Whiteboard: Visual Collaboration Made Universal](https://docs.mermaidchart.com/blog/posts/mermaid-whiteboard-visual-collaboration-made-universal)
|
||||
|
||||
|
||||
@@ -194,7 +194,7 @@ architecture-beta
|
||||
## Icons
|
||||
|
||||
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
||||
Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](../config/icons.md).
|
||||
Users can use any of the 200,000+ icons available in iconify.design, or [add custom icons](../config/icons.md).
|
||||
|
||||
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
||||
|
||||
|
||||
@@ -567,6 +567,30 @@ block-beta
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
### Class Styling
|
||||
|
||||
Mermaid enables applying styling to classes, which could make styling easier if you want to apply a certain set of styles to multiple elements, as you could just link those elements to a class.
|
||||
|
||||
#### Example - Styling a Single Class
|
||||
|
||||
```mermaid-example
|
||||
block-beta
|
||||
A space B
|
||||
A-->B
|
||||
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
|
||||
class A blue
|
||||
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block-beta
|
||||
A space B
|
||||
A-->B
|
||||
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
|
||||
class A blue
|
||||
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
In this example, a class named 'blue' is defined and applied to block 'A', while block 'B' receives individual styling. This demonstrates the flexibility of Mermaid in applying both shared and unique styles within the same diagram.
|
||||
|
||||
The ability to style blocks individually or through classes provides a powerful tool for enhancing the visual impact and clarity of block diagrams. Whether emphasizing certain elements or maintaining a cohesive design across the diagram, these styling capabilities are central to effective diagramming. The next sections will present practical examples and use cases, followed by tips for troubleshooting common issues.
|
||||
@@ -663,7 +687,7 @@ block-beta
|
||||
```
|
||||
|
||||
**Correction**:
|
||||
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
|
||||
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundamentals for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
|
||||
|
||||
```mermaid-example
|
||||
block-beta
|
||||
|
||||
@@ -399,7 +399,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
|
||||
title Component diagram for Internet Banking System - API Application
|
||||
|
||||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
|
||||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
@@ -439,7 +439,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
|
||||
title Component diagram for Internet Banking System - API Application
|
||||
|
||||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
|
||||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
|
||||
@@ -802,7 +802,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
||||
+run()
|
||||
}
|
||||
|
||||
callback Duck callback "Tooltip"
|
||||
callback Duck "callback" "Tooltip"
|
||||
link Zebra "https://www.github.com" "This is a link"
|
||||
</pre>
|
||||
|
||||
|
||||
@@ -171,7 +171,7 @@ Cardinality is a property that describes how many elements of another entity can
|
||||
|
||||
### Identification
|
||||
|
||||
Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
|
||||
Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question cannot have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
|
||||
|
||||
| Value | Alias for |
|
||||
| :---: | :---------------: |
|
||||
|
||||
@@ -83,7 +83,11 @@ flowchart LR
|
||||
Use double quotes and backticks "\` text \`" to enclose the markdown text.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
---
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: false
|
||||
---
|
||||
flowchart LR
|
||||
markdown["`This **is** _Markdown_`"]
|
||||
newLines["`Line1
|
||||
@@ -93,7 +97,11 @@ flowchart LR
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
---
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: false
|
||||
---
|
||||
flowchart LR
|
||||
markdown["`This **is** _Markdown_`"]
|
||||
newLines["`Line1
|
||||
@@ -932,7 +940,7 @@ Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** an
|
||||
|
||||
### Icon Shape
|
||||
|
||||
You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](../config/icons.md). The syntax for defining an icon shape is as follows:
|
||||
You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions to [add custom icons](../config/icons.md). The syntax for defining an icon shape is as follows:
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
@@ -944,7 +952,7 @@ flowchart TD
|
||||
A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
|
||||
```
|
||||
|
||||
### Parameters
|
||||
#### Parameters
|
||||
|
||||
- **icon**: The name of the icon from the registered icon pack.
|
||||
- **form**: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include:
|
||||
@@ -971,7 +979,7 @@ flowchart TD
|
||||
A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
|
||||
```
|
||||
|
||||
### Parameters
|
||||
#### Parameters
|
||||
|
||||
- **img**: The URL of the image to be displayed.
|
||||
- **label**: The text label associated with the image. This can be any string. If not defined, no label will be displayed.
|
||||
@@ -1592,7 +1600,10 @@ flowchart LR
|
||||
The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: false
|
||||
---
|
||||
flowchart LR
|
||||
subgraph "One"
|
||||
a("`The **cat**
|
||||
@@ -1605,7 +1616,10 @@ end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: false
|
||||
---
|
||||
flowchart LR
|
||||
subgraph "One"
|
||||
a("`The **cat**
|
||||
@@ -1936,6 +1950,19 @@ flowchart TD
|
||||
B-->E(A fa:fa-camera-retro perhaps?)
|
||||
```
|
||||
|
||||
There are two ways to display these FontAwesome icons:
|
||||
|
||||
### Register FontAwesome icon packs (v\<MERMAID_RELEASE_VERSION>+)
|
||||
|
||||
You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md).
|
||||
|
||||
Supported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`.
|
||||
|
||||
> **Note**
|
||||
> Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered.
|
||||
|
||||
### Register FontAwesome CSS
|
||||
|
||||
Mermaid supports Font Awesome if the CSS is included on the website.
|
||||
Mermaid does not have any restriction on the version of Font Awesome that can be used.
|
||||
|
||||
@@ -2016,7 +2043,9 @@ The _elk_ renderer is an experimental feature.
|
||||
You can change the renderer to elk by adding this directive:
|
||||
|
||||
```
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
config:
|
||||
flowchart:
|
||||
defaultRenderer: "elk"
|
||||
```
|
||||
|
||||
> **Note**
|
||||
|
||||
@@ -550,7 +550,7 @@ click taskId href URL
|
||||
- taskId is the id of the task
|
||||
- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
|
||||
|
||||
Beginner's tip—a full example using interactive links in an html context:
|
||||
Beginner's tip—a full example using interactive links in an HTML context:
|
||||
|
||||
```html
|
||||
<body>
|
||||
@@ -622,4 +622,86 @@ gantt
|
||||
5 : 0, 5
|
||||
```
|
||||
|
||||
### Timeline (with comments, CSS, config in frontmatter)
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
# Frontmatter config, YAML comments
|
||||
title: Ignored if specified in chart
|
||||
displayMode: compact #gantt specific setting but works at this level too
|
||||
config:
|
||||
# theme: forest
|
||||
# themeCSS: " #item36 { fill: CadetBlue } "
|
||||
themeCSS: " // YAML supports multiline strings using a newline markers: \n
|
||||
#item36 { fill: CadetBlue } \n
|
||||
|
||||
// Custom marker workaround CSS from forum (below) \n
|
||||
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } \n
|
||||
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
|
||||
"
|
||||
gantt:
|
||||
useWidth: 400
|
||||
rightPadding: 0
|
||||
topAxis: true #false
|
||||
numberSectionStyles: 2
|
||||
---
|
||||
gantt
|
||||
title Timeline - Gantt Sampler
|
||||
dateFormat YYYY
|
||||
axisFormat %y
|
||||
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
|
||||
tickInterval 1decade
|
||||
|
||||
section Issue19062
|
||||
71 : item71, 1900, 1930
|
||||
section Issue19401
|
||||
36 : item36, 1913, 1935
|
||||
section Issue1300
|
||||
94 : item94, 1910, 1915
|
||||
5 : item5, 1920, 1925
|
||||
0 : milestone, item0, 1918, 1s
|
||||
9 : vert, 1906, 1s %% not yet official
|
||||
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
# Frontmatter config, YAML comments
|
||||
title: Ignored if specified in chart
|
||||
displayMode: compact #gantt specific setting but works at this level too
|
||||
config:
|
||||
# theme: forest
|
||||
# themeCSS: " #item36 { fill: CadetBlue } "
|
||||
themeCSS: " // YAML supports multiline strings using a newline markers: \n
|
||||
#item36 { fill: CadetBlue } \n
|
||||
|
||||
// Custom marker workaround CSS from forum (below) \n
|
||||
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } \n
|
||||
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
|
||||
"
|
||||
gantt:
|
||||
useWidth: 400
|
||||
rightPadding: 0
|
||||
topAxis: true #false
|
||||
numberSectionStyles: 2
|
||||
---
|
||||
gantt
|
||||
title Timeline - Gantt Sampler
|
||||
dateFormat YYYY
|
||||
axisFormat %y
|
||||
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
|
||||
tickInterval 1decade
|
||||
|
||||
section Issue19062
|
||||
71 : item71, 1900, 1930
|
||||
section Issue19401
|
||||
36 : item36, 1913, 1935
|
||||
section Issue1300
|
||||
94 : item94, 1910, 1915
|
||||
5 : item5, 1920, 1925
|
||||
0 : milestone, item0, 1918, 1s
|
||||
9 : vert, 1906, 1s %% not yet official
|
||||
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
|
||||
```
|
||||
|
||||
<!--- cspell:ignore isadded --->
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gitgraph.md](../../packages/mermaid/src/docs/syntax/gitgraph.md).
|
||||
|
||||
# Gitgraph Diagrams
|
||||
# GitGraph Diagrams
|
||||
|
||||
> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
|
||||
|
||||
@@ -413,7 +413,7 @@ Let see an example:
|
||||
commit id:"C"
|
||||
```
|
||||
|
||||
## Gitgraph specific configuration options
|
||||
## GitGraph specific configuration options
|
||||
|
||||
In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:
|
||||
|
||||
@@ -1126,7 +1126,7 @@ gitGraph:
|
||||
|
||||
## Themes
|
||||
|
||||
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
|
||||
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about [theming your diagram](../config/theming.md).
|
||||
|
||||
The following are the different pre-defined theme options:
|
||||
|
||||
|
||||
@@ -86,7 +86,7 @@ todo[Todo]
|
||||
|
||||
## Configuration Options
|
||||
|
||||
You can customize the Kanban diagram using a configuration block at the beginning of your markdown file. This is useful for setting global settings like a base URL for tickets. Currently there is one configuration option for kanban diagrams `ticketBaseUrl`. This can be set as in the the following example:
|
||||
You can customize the Kanban diagram using a configuration block at the beginning of your markdown file. This is useful for setting global settings like a base URL for tickets. Currently there is one configuration option for kanban diagrams `ticketBaseUrl`. This can be set as in the following example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
@@ -113,7 +113,7 @@ kanban
|
||||
[Create Documentation]
|
||||
docs[Create Blog about the new diagram]
|
||||
[In progress]
|
||||
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id9[Ready for deploy]
|
||||
id8[Design grammar]@{ assigned: 'knsv' }
|
||||
id10[Ready for test]
|
||||
@@ -139,7 +139,7 @@ kanban
|
||||
[Create Documentation]
|
||||
docs[Create Blog about the new diagram]
|
||||
[In progress]
|
||||
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id9[Ready for deploy]
|
||||
id8[Design grammar]@{ assigned: 'knsv' }
|
||||
id10[Ready for test]
|
||||
|
||||
@@ -240,7 +240,7 @@ mindmap
|
||||
C
|
||||
```
|
||||
|
||||
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
|
||||
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is neither a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
@@ -308,7 +308,7 @@ From version 9.4.0 you can simplify this code to:
|
||||
</script>
|
||||
```
|
||||
|
||||
You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
You can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
|
||||
<!---
|
||||
cspell:locale en,en-gb
|
||||
|
||||
@@ -48,7 +48,13 @@ Drawing a pie chart is really simple in mermaid.
|
||||
## Example
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
|
||||
---
|
||||
config:
|
||||
pie:
|
||||
textPosition: 0.5
|
||||
themeVariables:
|
||||
pieOuterStrokeWidth: "5px"
|
||||
---
|
||||
pie showData
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
@@ -58,7 +64,13 @@ pie showData
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
|
||||
---
|
||||
config:
|
||||
pie:
|
||||
textPosition: 0.5
|
||||
themeVariables:
|
||||
pieOuterStrokeWidth: "5px"
|
||||
---
|
||||
pie showData
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
|
||||
@@ -148,7 +148,14 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
|
||||
## Example on config and theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
|
||||
---
|
||||
config:
|
||||
quadrantChart:
|
||||
chartWidth: 400
|
||||
chartHeight: 400
|
||||
themeVariables:
|
||||
quadrant1TextFill: "ff0000"
|
||||
---
|
||||
quadrantChart
|
||||
x-axis Urgent --> Not Urgent
|
||||
y-axis Not Important --> "Important ❤"
|
||||
@@ -159,7 +166,14 @@ quadrantChart
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
|
||||
---
|
||||
config:
|
||||
quadrantChart:
|
||||
chartWidth: 400
|
||||
chartHeight: 400
|
||||
themeVariables:
|
||||
quadrant1TextFill: "ff0000"
|
||||
---
|
||||
quadrantChart
|
||||
x-axis Urgent --> Not Urgent
|
||||
y-axis Not Important --> "Important ❤"
|
||||
@@ -178,7 +192,7 @@ Points can either be styled directly or with defined shared classes
|
||||
```md
|
||||
Point A: [0.9, 0.0] radius: 12
|
||||
Point B: [0.8, 0.1] color: #ff3300, radius: 10
|
||||
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
|
||||
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
|
||||
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
|
||||
```
|
||||
|
||||
|
||||
@@ -177,7 +177,15 @@ Please refer to the [configuration](/config/schema-docs/config-defs-radar-diagra
|
||||
|
||||
> **Note**
|
||||
> The default values for these variables depend on the theme used. To override the default values, set the desired values in the themeVariables section of the configuration:
|
||||
> %%{init: {"themeVariables": {"cScale0": "#FF0000", "cScale1": "#00FF00"}} }%%
|
||||
>
|
||||
> ---
|
||||
>
|
||||
> config:
|
||||
> themeVariables:
|
||||
> cScale0: "#FF0000"
|
||||
> cScale1: "#00FF00"
|
||||
>
|
||||
> ---
|
||||
|
||||
Radar charts support the color scales `cScale${i}` where `i` is a number from `0` to the theme's maximum number of colors in its color scale. Usually, the maximum number of colors is `12`.
|
||||
|
||||
@@ -191,7 +199,15 @@ Radar charts support the color scales `cScale${i}` where `i` is a number from `0
|
||||
|
||||
> **Note**
|
||||
> Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax.
|
||||
> %%{init: {"themeVariables": {"radar": {"axisColor": "#FF0000"}} } }%%
|
||||
>
|
||||
> ---
|
||||
>
|
||||
> config:
|
||||
> themeVariables:
|
||||
> radar:
|
||||
> axisColor: "#FF0000"
|
||||
>
|
||||
> ---
|
||||
|
||||
| Property | Description | Default Value |
|
||||
| -------------------- | ---------------------------- | ------------- |
|
||||
|
||||
@@ -50,7 +50,7 @@ There are three types of components to a requirement diagram: requirement, eleme
|
||||
|
||||
The grammar for defining each is defined below. Words denoted in angle brackets, such as `<word>`, are enumerated keywords that have options elaborated in a table. `user_defined_...` is use in any place where user input is expected.
|
||||
|
||||
An important note on user text: all input can be surrounded in quotes or not. For example, both `Id: "here is an example"` and `Id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
|
||||
An important note on user text: all input can be surrounded in quotes or not. For example, both `id: "here is an example"` and `id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
|
||||
|
||||
### Requirement
|
||||
|
||||
|
||||
@@ -278,7 +278,7 @@ stateDiagram-v2
|
||||
}
|
||||
```
|
||||
|
||||
_You can not define transitions between internal states belonging to different composite states_
|
||||
_You cannot define transitions between internal states belonging to different composite states_
|
||||
|
||||
## Choice
|
||||
|
||||
|
||||
@@ -234,7 +234,13 @@ mermaid.initialize({
|
||||
let us look at same example, where we have disabled the multiColor option.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
timeline:
|
||||
disableMulticolor: true
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -245,7 +251,13 @@ let us look at same example, where we have disabled the multiColor option.
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
timeline:
|
||||
disableMulticolor: true
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -269,11 +281,17 @@ Example:
|
||||
Now let's override the default values for the `cScale0` to `cScale2` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
|
||||
'cScale1': '#00ff00',
|
||||
'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
cScale0: '#ff0000'
|
||||
cScaleLabel0: '#ffffff'
|
||||
cScale1: '#00ff00'
|
||||
cScale2: '#0000ff'
|
||||
cScaleLabel2: '#ffffff'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -287,11 +305,17 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
|
||||
'cScale1': '#00ff00',
|
||||
'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
cScale0: '#ff0000'
|
||||
cScaleLabel0: '#ffffff'
|
||||
cScale1: '#00ff00'
|
||||
cScale2: '#0000ff'
|
||||
cScaleLabel2: '#ffffff'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -308,7 +332,7 @@ See how the colors are changed to the values specified in the theme variables.
|
||||
|
||||
## Themes
|
||||
|
||||
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
|
||||
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about [theming your diagram](../config/theming.md).
|
||||
|
||||
The following are the different pre-defined theme options:
|
||||
|
||||
@@ -324,7 +348,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Base Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -337,7 +365,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -352,7 +384,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Forest Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'forest'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -365,7 +401,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'forest'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -380,7 +420,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Dark Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'dark'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -393,7 +437,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'dark'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -408,7 +456,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Default Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -421,7 +473,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -436,7 +492,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Neutral Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'neutral'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -449,7 +509,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'neutral'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -473,4 +537,4 @@ You can use this method to add mermaid including the timeline diagram to a web p
|
||||
</script>
|
||||
```
|
||||
|
||||
You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
You can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
|
||||
@@ -138,9 +138,16 @@ xychart-beta
|
||||
|
||||
## Chart Theme Variables
|
||||
|
||||
> **Note**
|
||||
> Themes for xychart resides inside xychart attribute so to set the variables use this syntax
|
||||
> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
|
||||
Themes for xychart resides inside xychart attribute so to set the variables use this syntax:
|
||||
|
||||
```yaml
|
||||
---
|
||||
config:
|
||||
themeVariables:
|
||||
xyChart:
|
||||
titleColor: '#ff0000'
|
||||
---
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
| ---------------- | --------------------------------------------------------- |
|
||||
|
||||
Reference in New Issue
Block a user