+
+
+
+Generate diagrams from markdown-like text. +
+
+ 
-[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://bundlephobia.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_) +
+Live Editor! +
++ 📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us +
++简体中文 +
-English | [简体中文](./README.zh-CN.md) +
@@ -27,14 +56,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).
+
+
+通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。 +
+
+
-[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://bundlephobia.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_) +
+Live Editor! +
++ 📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们 +
++English +
-[English](./README.md) | 简体中文 +
@@ -24,12 +53,10 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。+ timeline + title My day + section section with no tasks + section Go to work at the dog office + 1930 : first step : second step is a long step + : third step + 1940 : fourth step : fifth step + section Go home + 1950 : India got independent and already won war against Pakistan + 1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR + 1970 : Green Revolution comes to india + section Another section with no tasks + I am a big big big tasks + I am not so big tasks ++
+ timeline + title MermaidChart 2023 Timeline + section 2023 Q1+ +
Release Personal Tier + Buttet 1 : sub-point 1a : sub-point 1b + : sub-point 1c + Bullet 2 : sub-point 2a : sub-point 2b + section 2023 Q2
Release XYZ Tier + Buttet 3 : sub-point
3a : sub-point 3b + : sub-point 3c + Bullet 4 : sub-point 4a : sub-point 4b + +
+ timeline + title England's History Timeline + section Stone Age + 7600 BC : Britain's oldest known house was built in Orkney, Scotland + 6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers. + section Broze Age + 2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking. + : New styles of pottery and ways of burying the dead appear. + 2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles. + : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive. + ++
+ %%{'init': { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
+ timeline
+ title History of Social Media Platform
+ 2002 : LinkedIn
+ 2004 : Facebook : Google : Pixar
+ 2005 : Youtube
+ 2006 : Twitter
+ 2007 : Tumblr
+ 2008s : Instagram
+ 2010 : Pinterest
+
+
+ %%{init: { 'logLevel': 'debug', 'theme': 'base', 'themeVariables': {
+ 'cScale0': '#ff0000',
+ 'cScale1': '#00ff00',
+ 'cScale2': '#ff0000'
+ } } }%%
+ timeline
+ title History of Social Media Platform
+ 2002 : LinkedIn
+ 2004 : Facebook : Google : Pixar
+ 2005 : Youtube
+ 2006 : Twitter
+ 2007 : Tumblr
+ 2008s : Instagram
+ 2010 : Pinterest
+
+
+
+ %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+ 'cScale0': '#ff0000',
+ 'cScale1': '#00ff00',
+ 'cScale2': '#0000ff'
+ } } }%%
+ timeline
+ title History of Social Media Platform
+ 2002 : LinkedIn
+ 2004 : Facebook : Google
+ 2005 : Youtube
+ 2006 : Twitter
+ 2007 : Tumblr
+ 2008 : Instagram
+ 2010 : Pinterest
+
+
+
+ + timeline + title History of Social Media Platform + 2002 : LinkedIn + 2004 : Facebook : Google + 2005 : Youtube + 2006 : Twitter + 2007 : Tumblr + 2008s : Instagram + 2010 : Pinterest ++
+mindmap + root + child1((Circle)) + grandchild 1 + grandchild 2 + child2(Round rectangle) + grandchild 3 + grandchild 4 + child3[Square] + grandchild 5 + ::icon(mdi mdi-fire) + gc6((grand+
child 6)) + ::icon(mdi mdi-fire) + gc7((grand
grand
child 8)) +
+ flowchart-elk TB + a --> b + a --> c + b --> d + c --> d ++ + + + + + + + diff --git a/cypress/platform/class.html b/cypress/platform/class.html index 85fae2a77..1d72c34a5 100644 --- a/cypress/platform/class.html +++ b/cypress/platform/class.html @@ -46,13 +46,9 @@
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram-v2
- class BankAccount{
- +String owner
- +BigDecimal balance
- +deposit(amount) bool
- +withdrawl(amount) int
- }
- cssClass "BankAccount" customCss
+classA <|-- classB : implements
+classC *-- classD : composition
+classE o-- classF : aggregation
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index afc12dbe9..e28184627 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -54,7 +54,7 @@
-
+
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
graph TB
a --> b
@@ -62,14 +62,14 @@ graph TB
b --> d
c --> d
-
+
flowchart-elk TB
a --> b
a --> c
b --> d
c --> d
-
+
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
@@ -125,7 +125,7 @@ flowchart TB
-
+
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU]
@@ -227,14 +227,24 @@ sequenceDiagram
Customer->>+Merchant: Receives goods or services
-
- gantt
- title Style today marker (vertical line should be 5px wide and half-transparent blue)
- dateFormat YYYY-MM-DD
- axisFormat %d
- todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
- section Section1
- Today: 1, -1h
+
+mindmap
+ root((mindmap))
+ Origins
+ Long history
+ ::icon(fa fa-book)
+ Popularisation
+ British popular psychology author Tony Buzan
+ Research
+ On effectiveness
and features
+ On Automatic creation
+ Uses
+ Creative techniques
+ Strategic planning
+ Argument mapping
+ Tools
+ Pen and paper
+ Mermaid
@@ -252,7 +262,7 @@ sequenceDiagram
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
- // theme: 'forest',
+ theme: 'dark',
startOnLoad: true,
logLevel: 0,
flowchart: {
diff --git a/demos/sequence.html b/demos/sequence.html
index 2000d489a..891dc90ba 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -128,6 +128,22 @@
+
+ sequenceDiagram
+ box lightgreen Alice & John
+ participant A
+ participant J
+ end
+ box Another Group very very long description not wrapped
+ participant B
+ end
+ A->>J: Hello John, how are you?
+ J->>A: Great!
+ A->>B: Hello Bob, how are you ?
+
+
+
+
+
+