mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

#3358 Doc updates after viewing the page

This commit is contained in:
Knut Sveidqvist 2024-01-18 18:03:37 +01:00
parent bf64509216
commit d075766760
9 changed files with 297 additions and 528 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
cypress/platform/knsv2.html
View File

@ -65,9 +65,12 @@
<body>
<pre id="diagram" class="mermaid">
block-beta
columns 1
B["A wide one in the middle"]
style B fill:#f9F,stroke:#333,stroke-width:4px
A space:2 B
A-- "X" -->B
</pre>
<pre id="diagram" class="mermaid">
flowchart LR
A-- "X" -->B
</pre>
<pre id="diagram" class="mermaid2">
block-beta

2
docs/config/setup/modules/defaultConfig.md
View File

@ -14,7 +14,7 @@
#### Defined in
[defaultConfig.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L272)
[defaultConfig.ts:278](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L278)
---

2
docs/config/setup/modules/mermaidAPI.md
View File

@ -96,7 +96,7 @@ mermaid.initialize(config);
#### Defined in
[mermaidAPI.ts:608](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L608)
[mermaidAPI.ts:607](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L607)
## Functions

247
docs/intro/examples.md
View File

@ -1,247 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/examples.md](../../packages/mermaid/src/docs/intro/examples.md).
## Diagram Types
### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax)
```mermaid-example
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
### [Sequence diagram](../syntax/sequenceDiagram.md)
```mermaid-example
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
### [Gantt diagram](../syntax/gantt.md)
```mermaid-example
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
```
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
```
### [Class diagram](../syntax/classDiagram.md)
```mermaid-example
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
### [Git graph](../syntax/gitgraph.md)
```mermaid-example
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
```
```mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
```
### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md)
```mermaid-example
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
### [User Journey Diagram](../syntax/userJourney.md)
```mermaid-example
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
### [Quadrant Chart](../syntax/quadrantChart.md)
```mermaid-example
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
```
```mermaid
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
```
### [XY Chart](../syntax/xyChart.md)
```mermaid-example
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
```mermaid
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

232
docs/syntax/block.md
View File

@ -6,7 +6,41 @@
# Block Diagrams Documentation
## 1. Introduction to Block Diagrams
## Introduction to Block Diagrams
```mermaid-example
block-beta
columns 1
db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#969,stroke:#333,stroke-width:4px
```
```mermaid
block-beta
columns 1
db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#969,stroke:#333,stroke-width:4px
```
### Definition and Purpose
@ -14,6 +48,8 @@ Block diagrams are an intuitive and efficient way to represent complex systems,
The primary purpose of block diagrams is to provide a high-level view of a system, allowing for easy understanding and analysis without delving into the intricate details of each component. This makes them particularly useful for simplifying complex systems and for explaining the overall structure and interaction of components within a system.
Many people use mermaid flowcharts for this purpose. A side-effect of this is that the automatic layout sometimes move shapes to positions that the diagram maker does not want. Block diagrams use a different approach. In this diagram we give the author full control over where the shapes are positioned.
### General Use Cases
Block diagrams have a wide range of applications across various industries and disciplines. Some of the key use cases include:
@ -181,12 +217,12 @@ To create a block with round edges, which can be used to represent a softer or m
```mermaid-example
block-beta
id1(This is the text in the box)
id1("This is the text in the box")
```
```mermaid
block-beta
id1(This is the text in the box)
id1("This is the text in the box")
```
#### Example - Stadium-Shaped Block
@ -195,12 +231,12 @@ A stadium-shaped block, resembling an elongated circle, can be used for componen
```mermaid-example
block-beta
id1([This is the text in the box])
id1(["This is the text in the box"])
```
```mermaid
block-beta
id1([This is the text in the box])
id1(["This is the text in the box"])
```
#### Example - Subroutine Shape
@ -209,12 +245,12 @@ For representing subroutines or contained processes, a block with double vertica
```mermaid-example
block-beta
id1[[This is the text in the box]]
id1[["This is the text in the box"]]
```
```mermaid
block-beta
id1[[This is the text in the box]]
id1[["This is the text in the box"]]
```
#### Example - Cylindrical Shape
@ -223,12 +259,12 @@ The cylindrical shape is ideal for representing databases or storage components:
```mermaid-example
block-beta
id1[(Database)]
id1[("Database")]
```
```mermaid
block-beta
id1[(Database)]
id1[("Database")]
```
#### Example - Circle Shape
@ -237,12 +273,12 @@ A circle can be used for centralized or pivotal components:
```mermaid-example
block-beta
id1((This is the text in the circle))
id1(("This is the text in the circle"))
```
```mermaid
block-beta
id1((This is the text in the circle))
id1(("This is the text in the circle"))
```
#### Example - Asymmetric, Rhombus, and Hexagon Shapes
@ -253,36 +289,36 @@ For decision points, use a rhombus, and for unique or specialized processes, asy
```mermaid-example
block-beta
id1>This is the text in the box]
id1>"This is the text in the box"]
```
```mermaid
block-beta
id1>This is the text in the box]
id1>"This is the text in the box"]
```
**Rhombus**
```mermaid-example
block-beta
id1{This is the text in the box}
id1{"This is the text in the box"}
```
```mermaid
block-beta
id1{This is the text in the box}
id1{"This is the text in the box"}
```
**Hexagon**
```mermaid-example
block-beta
id1{{This is the text in the box}}
id1{{"This is the text in the box"}}
```
```mermaid
block-beta
id1{{This is the text in the box}}
id1{{"This is the text in the box"}}
```
#### Example - Parallelogram and Trapezoid Shapes
@ -291,18 +327,18 @@ Parallelogram and trapezoid shapes are perfect for inputs/outputs and transition
```mermaid-example
flowchart TD
id1[/This is the text in the box/]
id2[\This is the text in the box\]
A[/Christmas\]
B[\Go shopping/]
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
B[\"Go shopping"/]
```
```mermaid
flowchart TD
id1[/This is the text in the box/]
id2[\This is the text in the box\]
A[/Christmas\]
B[\Go shopping/]
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
B[\"Go shopping"/]
```
#### Example - Double Circle
@ -311,12 +347,12 @@ For highlighting critical or high-priority components, a double circle can be ef
```mermaid-example
flowchart TD
id1(((This is the text in the circle)))
id1((("This is the text in the circle")))
```
```mermaid
flowchart TD
id1(((This is the text in the circle)))
id1((("This is the text in the circle")))
```
### Block Arrows and Space Blocks
@ -387,11 +423,13 @@ A simple link with an arrow can be created to show direction or flow from one bl
```mermaid-example
block-beta
A space B
A-->B
```
```mermaid
block-beta
A space B
A-->B
```
@ -402,11 +440,13 @@ For connections that are less direct or to represent a different type of relatio
```mermaid-example
block-beta
A space B
A --- B
```
```mermaid
block-beta
A space B
A --- B
```
@ -421,12 +461,14 @@ To add text to a link, the syntax includes the text within the link definition:
```mermaid-example
block-beta
A-- This is the text! ---B
A space:2 B
A-- "X" -->B
```
```mermaid
block-beta
A-- This is the text! ---B
A space:2 B
A-- "X" -->B
```
This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram.
@ -440,26 +482,16 @@ A dotted link can be used to represent a weaker or less formal relationship:
```mermaid-example
block-beta
A space:2 B
A-.->B
```
```mermaid
block-beta
A space:2 B
A-.->B
```
For a more pronounced connection, a thick link can be used:
```mermaid-example
block-beta
A==>B
```
```mermaid
block-beta
A==>B
```
Example - Edges and Styles:
```mermaid-example
@ -476,7 +508,7 @@ columns 1
D
ID --> D
C --> D
style B fill:#f9F,stroke:#333,stroke-width:4px
style B fill:#939,stroke:#333,stroke-width:4px
```
```mermaid
@ -493,7 +525,7 @@ columns 1
D
ID --> D
C --> D
style B fill:#f9F,stroke:#333,stroke-width:4px
style B fill:#939,stroke:#333,stroke-width:4px
```
## 6. Styling and Customization
@ -510,15 +542,17 @@ To apply custom styles to a block, you can use the `style` keyword followed by t
```mermaid-example
block-beta
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
```mermaid
block-beta
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
@ -540,24 +574,28 @@ Illustrating a simple software system architecture with interconnected component
```mermaid-example
block-beta
columns 2
Frontend Backend
Frontend-->Backend
Database[(Database)]
Backend-->Database
class Frontend,Backend fill:#f96,stroke:#333;
class Database fill:#9f9,stroke:#333;
columns 3
Frontend blockArrowId6<["&nbsp;&nbsp;"]>(right) Backend
space:2 down<["&nbsp;&nbsp;"]>(down)
Disk left<["&nbsp;&nbsp;"]>(left) Database[("Database")]
classDef front fill:#696,stroke:#333;
classDef back fill:#969,stroke:#333;
class Frontend front
class Backend,Database back
```
```mermaid
block-beta
columns 2
Frontend Backend
Frontend-->Backend
Database[(Database)]
Backend-->Database
class Frontend,Backend fill:#f96,stroke:#333;
class Database fill:#9f9,stroke:#333;
columns 3
Frontend blockArrowId6<["&nbsp;&nbsp;"]>(right) Backend
space:2 down<["&nbsp;&nbsp;"]>(down)
Disk left<["&nbsp;&nbsp;"]>(left) Database[("Database")]
classDef front fill:#696,stroke:#333;
classDef back fill:#969,stroke:#333;
class Frontend front
class Backend,Database back
```
This example shows a basic architecture with a frontend, backend, and database. The blocks are styled to differentiate between types of components.
@ -568,41 +606,35 @@ Representing a business process flow with decision points and multiple stages:
```mermaid-example
block-beta
Start{Start}
Decision{Make Decision}
Process1[Process A]
Process2[Process B]
End((End))
Start --> Decision
Decision -- Yes --> Process1
Decision -- No --> Process2
Process1 --> End
Process2 --> End
style Start fill:#f9f;
style End fill:#bbf;
columns 3
Start(("Start")) space:2
down<["&nbsp;&nbsp;"]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:#969;
style End fill:#696;
```
```mermaid
block-beta
Start{Start}
Decision{Make Decision}
Process1[Process A]
Process2[Process B]
End((End))
Start --> Decision
Decision -- Yes --> Process1
Decision -- No --> Process2
Process1 --> End
Process2 --> End
style Start fill:#f9f;
style End fill:#bbf;
columns 3
Start(("Start")) space:2
down<["&nbsp;&nbsp;"]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:#969;
style End fill:#696;
```
This diagram depicts a simple decision-making process with two possible paths leading to an endpoint, demonstrating the use of different shapes and directional arrows.
### Real works Application Scenarios
### Real world Scenarios
Block diagrams can be employed in a variety of real-world scenarios. Here are a few examples:
@ -614,22 +646,6 @@ These practical examples and scenarios underscore the utility of Mermaid block d
The next section, 'Troubleshooting and Common Issues', will provide insights into resolving common challenges encountered when working with Mermaid block diagrams, ensuring a smooth diagramming experience.
```mermaid-example
```
```mermaid
```
```mermaid-example
```
```mermaid
```
## 8. Troubleshooting and Common Issues
Working with Mermaid block diagrams can sometimes present challenges, especially as the complexity of the diagrams increases. This section aims to provide guidance on resolving common issues and offers tips for managing more intricate diagram structures.
@ -646,15 +662,17 @@ A common mistake is incorrect linking syntax, which can lead to unexpected resul
A - B
**Correction**:
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection:
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also rememeber 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:
```mermaid-example
block-beta
A space B
A --> B
```
```mermaid
block-beta
A space B
A --> B
```
@ -665,13 +683,13 @@ Applying styles in the wrong context or with incorrect syntax can lead to blocks
```mermaid-example
block-beta
A
style A fill#f9f;
style A fill#969;
```
```mermaid
block-beta
A
style A fill#f9f;
style A fill#969;
```
**Correction:**
@ -680,14 +698,14 @@ Correct the syntax by ensuring proper separation of style properties with commas
```mermaid-example
block-beta
A
style A fill:#f9f,stroke:#333;
style A fill:#969,stroke:#333;
```
```mermaid
block-beta
A
style A fill:#f9f,stroke:#333;
style A fill:#969,stroke:#333;
```

3
packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js
View File

@ -27,7 +27,10 @@ export const setConf = function (cnf) {
* @param element
* @param graph
* @param layout
* @param vert
* @param elem
* @param g
* @param id
* @param conf
*/
async function swimlaneRender(layout, vert, elem, g, id, conf) {

121
packages/mermaid/src/docs/syntax/block.md
View File

@ -5,7 +5,24 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
# Block Diagrams Documentation
## 1. Introduction to Block Diagrams
## Introduction to Block Diagrams
```mermaid
block-beta
columns 1
db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#969,stroke:#333,stroke-width:4px
```
### Definition and Purpose
@ -13,6 +30,8 @@ Block diagrams are an intuitive and efficient way to represent complex systems,
The primary purpose of block diagrams is to provide a high-level view of a system, allowing for easy understanding and analysis without delving into the intricate details of each component. This makes them particularly useful for simplifying complex systems and for explaining the overall structure and interaction of components within a system.
Many people use mermaid flowcharts for this purpose. A side-effect of this is that the automatic layout sometimes move shapes to positions that the diagram maker does not want. Block diagrams use a different approach. In this diagram we give the author full control over where the shapes are positioned.
### General Use Cases
Block diagrams have a wide range of applications across various industries and disciplines. Some of the key use cases include:
@ -145,7 +164,7 @@ To create a block with round edges, which can be used to represent a softer or m
```mermaid-example
block-beta
id1(This is the text in the box)
id1("This is the text in the box")
```
#### Example - Stadium-Shaped Block
@ -154,7 +173,7 @@ A stadium-shaped block, resembling an elongated circle, can be used for componen
```mermaid-example
block-beta
id1([This is the text in the box])
id1(["This is the text in the box"])
```
#### Example - Subroutine Shape
@ -163,7 +182,7 @@ For representing subroutines or contained processes, a block with double vertica
```mermaid-example
block-beta
id1[[This is the text in the box]]
id1[["This is the text in the box"]]
```
#### Example - Cylindrical Shape
@ -172,7 +191,7 @@ The cylindrical shape is ideal for representing databases or storage components:
```mermaid-example
block-beta
id1[(Database)]
id1[("Database")]
```
#### Example - Circle Shape
@ -181,7 +200,7 @@ A circle can be used for centralized or pivotal components:
```mermaid-example
block-beta
id1((This is the text in the circle))
id1(("This is the text in the circle"))
```
#### Example - Asymmetric, Rhombus, and Hexagon Shapes
@ -192,21 +211,21 @@ For decision points, use a rhombus, and for unique or specialized processes, asy
```mermaid-example
block-beta
id1>This is the text in the box]
id1>"This is the text in the box"]
```
**Rhombus**
```mermaid-example
block-beta
id1{This is the text in the box}
id1{"This is the text in the box"}
```
**Hexagon**
```mermaid-example
block-beta
id1{{This is the text in the box}}
id1{{"This is the text in the box"}}
```
#### Example - Parallelogram and Trapezoid Shapes
@ -215,10 +234,10 @@ Parallelogram and trapezoid shapes are perfect for inputs/outputs and transition
```mermaid-example
flowchart TD
id1[/This is the text in the box/]
id2[\This is the text in the box\]
A[/Christmas\]
B[\Go shopping/]
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
B[\"Go shopping"/]
```
#### Example - Double Circle
@ -227,7 +246,7 @@ For highlighting critical or high-priority components, a double circle can be ef
```mermaid-example
flowchart TD
id1(((This is the text in the circle)))
id1((("This is the text in the circle")))
```
### Block Arrows and Space Blocks
@ -281,6 +300,7 @@ A simple link with an arrow can be created to show direction or flow from one bl
```mermaid-example
block-beta
A space B
A-->B
```
@ -291,6 +311,7 @@ For connections that are less direct or to represent a different type of relatio
```mermaid-example
block-beta
A space B
A --- B
```
@ -305,7 +326,8 @@ To add text to a link, the syntax includes the text within the link definition:
```mermaid-example
block-beta
A-- This is the text! ---B
A space:2 B
A-- "X" -->B
```
This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram.
@ -319,16 +341,10 @@ A dotted link can be used to represent a weaker or less formal relationship:
```mermaid-example
block-beta
A space:2 B
A-.->B
```
For a more pronounced connection, a thick link can be used:
```mermaid-example
block-beta
A==>B
```
Example - Edges and Styles:
```mermaid-example
@ -345,7 +361,7 @@ columns 1
D
ID --> D
C --> D
style B fill:#f9F,stroke:#333,stroke-width:4px
style B fill:#939,stroke:#333,stroke-width:4px
```
## 6. Styling and Customization
@ -362,8 +378,9 @@ To apply custom styles to a block, you can use the `style` keyword followed by t
```mermaid-example
block-beta
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
@ -385,13 +402,15 @@ Illustrating a simple software system architecture with interconnected component
```mermaid
block-beta
columns 2
Frontend Backend
Frontend-->Backend
Database[(Database)]
Backend-->Database
class Frontend,Backend fill:#f96,stroke:#333;
class Database fill:#9f9,stroke:#333;
columns 3
Frontend blockArrowId6<["&nbsp;&nbsp;"]>(right) Backend
space:2 down<["&nbsp;&nbsp;"]>(down)
Disk left<["&nbsp;&nbsp;"]>(left) Database[("Database")]
classDef front fill:#696,stroke:#333;
classDef back fill:#969,stroke:#333;
class Frontend front
class Backend,Database back
```
This example shows a basic architecture with a frontend, backend, and database. The blocks are styled to differentiate between types of components.
@ -402,24 +421,21 @@ Representing a business process flow with decision points and multiple stages:
```mermaid-example
block-beta
Start{Start}
Decision{Make Decision}
Process1[Process A]
Process2[Process B]
End((End))
Start --> Decision
Decision -- Yes --> Process1
Decision -- No --> Process2
Process1 --> End
Process2 --> End
style Start fill:#f9f;
style End fill:#bbf;
columns 3
Start(("Start")) space:2
down<["&nbsp;&nbsp;"]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:#969;
style End fill:#696;
```
This diagram depicts a simple decision-making process with two possible paths leading to an endpoint, demonstrating the use of different shapes and directional arrows.
### Real works Application Scenarios
### Real world Scenarios
Block diagrams can be employed in a variety of real-world scenarios. Here are a few examples:
@ -431,14 +447,6 @@ These practical examples and scenarios underscore the utility of Mermaid block d
The next section, 'Troubleshooting and Common Issues', will provide insights into resolving common challenges encountered when working with Mermaid block diagrams, ensuring a smooth diagramming experience.
```mermaid-example
```
```mermaid-example
```
## 8. Troubleshooting and Common Issues
Working with Mermaid block diagrams can sometimes present challenges, especially as the complexity of the diagrams increases. This section aims to provide guidance on resolving common issues and offers tips for managing more intricate diagram structures.
@ -457,10 +465,11 @@ block-beta
```
**Correction**:
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection:
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also rememeber 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:
```mermaid-example
block-beta
A space B
A --> B
```
@ -471,7 +480,7 @@ Applying styles in the wrong context or with incorrect syntax can lead to blocks
```mermaid-example
block-beta
A
style A fill#f9f;
style A fill#969;
```
**Correction:**
@ -480,7 +489,7 @@ Correct the syntax by ensuring proper separation of style properties with commas
```mermaid-example
block-beta
A
style A fill:#f9f,stroke:#333;
style A fill:#969,stroke:#333;
```

199
pnpm-lock.yaml
View File

@ -374,7 +374,7 @@ importers:
version: 4.1.2
vitepress:
specifier: ^1.0.0-alpha.72
version: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
version: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)(typescript@5.0.4)
vitepress-plugin-search:
specifier: ^1.0.4-alpha.20
version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.8)
@ -420,7 +420,7 @@ importers:
dependencies:
'@zenuml/core':
specifier: ^3.0.6
version: 3.0.6(ts-node@10.9.1)
version: 3.0.6(ts-node@10.9.1)(typescript@5.1.6)
devDependencies:
mermaid:
specifier: workspace:^
@ -481,6 +481,61 @@ 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.3
version: 3.3.4
devDependencies:
'@iconify-json/carbon':
specifier: ^1.1.16
version: 1.1.16
'@unocss/reset':
specifier: ^0.58.0
version: 0.58.0
'@vite-pwa/vitepress':
specifier: ^0.3.0
version: 0.3.0(vite-plugin-pwa@0.17.0)
'@vitejs/plugin-vue':
specifier: ^4.2.1
version: 4.2.1(vite@4.5.0)(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.58.0
version: 0.58.0(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0)
unplugin-vue-components:
specifier: ^0.26.0
version: 0.26.0(rollup@2.79.1)(vue@3.3.4)
vite:
specifier: ^4.4.12
version: 4.5.0(@types/node@18.17.5)
vite-plugin-pwa:
specifier: ^0.17.0
version: 0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
vitepress:
specifier: 1.0.0-rc.31
version: 1.0.0-rc.31(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
workbox-window:
specifier: ^7.0.0
version: 7.0.0
tests/webpack:
dependencies:
'@mermaid-js/mermaid-example-diagram':
@ -1372,7 +1427,6 @@ packages:
/@babel/helper-string-parser@7.23.4:
resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
engines: {node: '>=6.9.0'}
dev: true
/@babel/helper-validator-identifier@7.22.20:
resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
@ -1455,7 +1509,6 @@ packages:
hasBin: true
dependencies:
'@babel/types': 7.23.5
dev: true
/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.23.5):
resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==}
@ -2547,7 +2600,6 @@ packages:
'@babel/helper-string-parser': 7.23.4
'@babel/helper-validator-identifier': 7.22.20
to-fast-properties: 2.0.0
dev: true
/@bcherny/json-schema-ref-parser@9.0.9:
resolution: {integrity: sha512-vmEmnJCfpkLdas++9OYg6riIezTYqTHpqUTODJzHLzs5UnXujbOJW9VwcVCnyo1mVRt32FRr23iXBx/sX8YbeQ==}
@ -4397,21 +4449,6 @@ packages:
picomatch: 2.3.1
dev: true
/@rollup/pluginutils@5.0.5(rollup@2.79.1):
resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==}
engines: {node: '>=14.0.0'}
peerDependencies:
rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
peerDependenciesMeta:
rollup:
optional: true
dependencies:
'@types/estree': 1.0.1
estree-walker: 2.0.2
picomatch: 2.3.1
rollup: 2.79.1
dev: true
/@rollup/pluginutils@5.1.0(rollup@2.79.1):
resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
engines: {node: '>=14.0.0'}
@ -5199,10 +5236,6 @@ packages:
resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
dev: false
/@types/web-bluetooth@0.0.17:
resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
dev: true
/@types/web-bluetooth@0.0.20:
resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
dev: true
@ -5791,15 +5824,15 @@ packages:
vue: 3.3.4
dev: true
/@vitejs/plugin-vue@4.2.3(vite@4.5.0)(vue@3.3.4):
resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
/@vitejs/plugin-vue@4.5.0(vite@4.5.0)(vue@3.3.8):
resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^4.0.0
vite: ^4.0.0 || ^5.0.0
vue: ^3.2.25
dependencies:
vite: 4.5.0(@types/node@18.17.5)
vue: 3.3.4
vue: 3.3.8(typescript@5.0.4)
dev: true
/@vitejs/plugin-vue@4.5.0(vite@5.0.2)(vue@3.3.8):
@ -5887,7 +5920,7 @@ packages:
pretty-format: 29.6.2
dev: true
/@vue/compat@3.3.4(vue@3.3.4):
/@vue/compat@3.3.4(vue@3.3.8):
resolution: {integrity: sha512-VwAsPqUqRJVxeLQPUC03Sa5d+T8UG2Qv4VItq74KmNvtQlRXICpa/sqq12BcyBB4Tz1U5paOEZxWCUoXkrZ9QQ==}
peerDependencies:
vue: 3.3.4
@ -5895,7 +5928,7 @@ packages:
'@babel/parser': 7.23.0
estree-walker: 2.0.2
source-map-js: 1.0.2
vue: 3.3.4
vue: 3.3.8(typescript@5.1.6)
dev: false
/@vue/compiler-core@3.3.4:
@ -5909,11 +5942,10 @@ packages:
/@vue/compiler-core@3.3.8:
resolution: {integrity: sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==}
dependencies:
'@babel/parser': 7.23.0
'@babel/parser': 7.23.5
'@vue/shared': 3.3.8
estree-walker: 2.0.2
source-map-js: 1.0.2
dev: true
/@vue/compiler-dom@3.3.4:
resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
@ -5926,12 +5958,11 @@ packages:
dependencies:
'@vue/compiler-core': 3.3.8
'@vue/shared': 3.3.8
dev: true
/@vue/compiler-sfc@3.3.4:
resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
dependencies:
'@babel/parser': 7.23.0
'@babel/parser': 7.23.5
'@vue/compiler-core': 3.3.4
'@vue/compiler-dom': 3.3.4
'@vue/compiler-ssr': 3.3.4
@ -5945,7 +5976,7 @@ packages:
/@vue/compiler-sfc@3.3.8:
resolution: {integrity: sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==}
dependencies:
'@babel/parser': 7.23.0
'@babel/parser': 7.23.5
'@vue/compiler-core': 3.3.8
'@vue/compiler-dom': 3.3.8
'@vue/compiler-ssr': 3.3.8
@ -5955,7 +5986,6 @@ packages:
magic-string: 0.30.5
postcss: 8.4.31
source-map-js: 1.0.2
dev: true
/@vue/compiler-ssr@3.3.4:
resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
@ -5968,7 +5998,6 @@ packages:
dependencies:
'@vue/compiler-dom': 3.3.8
'@vue/shared': 3.3.8
dev: true
/@vue/devtools-api@6.5.0:
resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
@ -5994,7 +6023,6 @@ packages:
'@vue/shared': 3.3.8
estree-walker: 2.0.2
magic-string: 0.30.5
dev: true
/@vue/reactivity@3.3.4:
resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
@ -6005,7 +6033,6 @@ packages:
resolution: {integrity: sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==}
dependencies:
'@vue/shared': 3.3.8
dev: true
/@vue/runtime-core@3.3.4:
resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
@ -6018,7 +6045,6 @@ packages:
dependencies:
'@vue/reactivity': 3.3.8
'@vue/shared': 3.3.8
dev: true
/@vue/runtime-dom@3.3.4:
resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
@ -6033,7 +6059,6 @@ packages:
'@vue/runtime-core': 3.3.8
'@vue/shared': 3.3.8
csstype: 3.1.2
dev: true
/@vue/server-renderer@3.3.4(vue@3.3.4):
resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
@ -6051,15 +6076,13 @@ packages:
dependencies:
'@vue/compiler-ssr': 3.3.8
'@vue/shared': 3.3.8
vue: 3.3.8(typescript@5.0.4)
dev: true
vue: 3.3.8(typescript@5.1.6)
/@vue/shared@3.3.4:
resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
/@vue/shared@3.3.8:
resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
dev: true
/@vueuse/core@10.1.0(vue@3.3.4):
resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==}
@ -6067,23 +6090,11 @@ packages:
'@types/web-bluetooth': 0.0.16
'@vueuse/metadata': 10.1.0
'@vueuse/shared': 10.1.0(vue@3.3.4)
vue-demi: 0.14.5(vue@3.3.4)
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
/@vueuse/core@10.3.0(vue@3.3.4):
resolution: {integrity: sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==}
dependencies:
'@types/web-bluetooth': 0.0.17
'@vueuse/metadata': 10.3.0
'@vueuse/shared': 10.3.0(vue@3.3.4)
vue-demi: 0.14.6(vue@3.3.4)
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: true
dev: false
/@vueuse/core@10.6.1(vue@3.3.8):
resolution: {integrity: sha512-Pc26IJbqgC9VG1u6VY/xrXXfxD33hnvxBnKrLlA2LJlyHII+BSrRoTPJgGYq7qZOu61itITFUnm6QbacwZ4H8Q==}
@ -6151,31 +6162,18 @@ packages:
resolution: {integrity: sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==}
dev: false
/@vueuse/metadata@10.3.0:
resolution: {integrity: sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==}
dev: true
/@vueuse/metadata@10.6.1:
resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
dev: true
/@vueuse/shared@10.1.0(vue@3.3.4):
resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==}
dependencies:
vue-demi: 0.14.5(vue@3.3.4)
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
/@vueuse/shared@10.3.0(vue@3.3.4):
resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
dependencies:
vue-demi: 0.14.6(vue@3.3.4)
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: true
dev: false
/@vueuse/shared@10.6.1(vue@3.3.8):
resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
@ -6390,13 +6388,13 @@ packages:
resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
dev: true
/@zenuml/core@3.0.6(ts-node@10.9.1):
/@zenuml/core@3.0.6(ts-node@10.9.1)(typescript@5.1.6):
resolution: {integrity: sha512-azEBVrl+ClCPhII92TbzBUFcWhIjlOPdEHVzF6eZXs5Oy4JlrfldS5pAZBHCFL4riOBsjZ5sHHmQLQg9V07T4Q==}
engines: {node: '>=12.0.0'}
dependencies:
'@types/assert': 1.5.6
'@types/ramda': 0.28.25
'@vue/compat': 3.3.4(vue@3.3.4)
'@vue/compat': 3.3.4(vue@3.3.8)
antlr4: 4.11.0
color-string: 1.9.1
dom-to-image-more: 2.16.0
@ -6409,10 +6407,11 @@ packages:
postcss: 8.4.27
ramda: 0.28.0
tailwindcss: 3.3.3(ts-node@10.9.1)
vue: 3.3.4
vuex: 4.1.0(vue@3.3.4)
vue: 3.3.8(typescript@5.1.6)
vuex: 4.1.0(vue@3.3.8)
transitivePeerDependencies:
- ts-node
- typescript
dev: false
/JSONSelect@0.4.0:
@ -8085,7 +8084,7 @@ packages:
cspell-glob: 6.31.1
cspell-io: 6.31.1
cspell-lib: 6.31.1
fast-glob: 3.3.1
fast-glob: 3.3.2
fast-json-stable-stringify: 2.1.0
file-entry-cache: 6.0.1
get-stdin: 8.0.0
@ -9821,17 +9820,6 @@ packages:
micromatch: 4.0.5
dev: true
/fast-glob@3.3.1:
resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
engines: {node: '>=8.6.0'}
dependencies:
'@nodelib/fs.stat': 2.0.5
'@nodelib/fs.walk': 1.2.8
glob-parent: 5.1.2
merge2: 1.4.1
micromatch: 4.0.5
dev: true
/fast-glob@3.3.2:
resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
engines: {node: '>=8.6.0'}
@ -10489,7 +10477,7 @@ packages:
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
dependencies:
dir-glob: 3.0.1
fast-glob: 3.3.1
fast-glob: 3.3.2
ignore: 5.2.4
merge2: 1.4.1
slash: 4.0.0
@ -16353,7 +16341,7 @@ packages:
optional: true
dependencies:
'@antfu/utils': 0.7.6
'@rollup/pluginutils': 5.0.5(rollup@2.79.1)
'@rollup/pluginutils': 5.1.0(rollup@2.79.1)
chokidar: 3.5.3
debug: 4.3.4(supports-color@8.1.1)
fast-glob: 3.3.2
@ -16685,25 +16673,25 @@ packages:
flexsearch: 0.7.31
glob-to-regexp: 0.4.1
markdown-it: 13.0.1
vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)(typescript@5.0.4)
vue: 3.3.8(typescript@5.0.4)
dev: true
/vitepress@1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0):
/vitepress@1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)(typescript@5.0.4):
resolution: {integrity: sha512-Ou7fNE/OVYLrKGQMHSTVG6AcNsdv7tm4ACrdhx93SPMzEDj8UgIb4RFa5CTTowaYf3jeDGi2EAJlzXVC+IE3dg==}
hasBin: true
dependencies:
'@docsearch/css': 3.5.1
'@docsearch/js': 3.5.1(@algolia/client-search@4.19.1)(search-insights@2.7.0)
'@vitejs/plugin-vue': 4.2.3(vite@4.5.0)(vue@3.3.4)
'@vitejs/plugin-vue': 4.5.0(vite@4.5.0)(vue@3.3.8)
'@vue/devtools-api': 6.5.0
'@vueuse/core': 10.3.0(vue@3.3.4)
'@vueuse/core': 10.6.1(vue@3.3.8)
body-scroll-lock: 4.0.0-beta.0
mark.js: 8.11.1
minisearch: 6.1.0
shiki: 0.14.3
vite: 4.5.0(@types/node@18.17.5)
vue: 3.3.4
vue: 3.3.8(typescript@5.0.4)
transitivePeerDependencies:
- '@algolia/client-search'
- '@types/node'
@ -16718,6 +16706,7 @@ packages:
- stylus
- sugarss
- terser
- typescript
dev: true
/vitepress@1.0.0-rc.31(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
@ -16877,21 +16866,6 @@ packages:
resolution: {integrity: sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==}
dev: true
/vue-demi@0.14.5(vue@3.3.4):
resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
vue: ^3.0.0-0 || ^2.6.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
dependencies:
vue: 3.3.4
dev: false
/vue-demi@0.14.6(vue@3.3.4):
resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
engines: {node: '>=12'}
@ -16905,7 +16879,7 @@ packages:
optional: true
dependencies:
vue: 3.3.4
dev: true
dev: false
/vue-demi@0.14.6(vue@3.3.8):
resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
@ -16961,15 +16935,14 @@ packages:
'@vue/server-renderer': 3.3.8(vue@3.3.8)
'@vue/shared': 3.3.8
typescript: 5.1.6
dev: true
/vuex@4.1.0(vue@3.3.4):
/vuex@4.1.0(vue@3.3.8):
resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
peerDependencies:
vue: ^3.2.0
dependencies:
'@vue/devtools-api': 6.5.1
vue: 3.3.4
vue: 3.3.8(typescript@5.1.6)
dev: false
/w3c-hr-time@1.0.2:

10
vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs
View File

@ -16,6 +16,9 @@ var transformJison = (src) => {
// .vite/jisonPlugin.ts
var fileRegex = /\.(jison)$/;
/**
*
*/
function jison2() {
return {
name: 'jison',
@ -55,6 +58,10 @@ var MERMAID_CONFIG_DIAGRAM_KEYS = [
'c4',
'sankey',
];
/**
*
* @param mermaidConfigSchema
*/
function generateDefaults(mermaidConfigSchema) {
const ajv = new Ajv2019({
useDefaults: true,
@ -113,6 +120,9 @@ function generateDefaults(mermaidConfigSchema) {
}
return mermaidDefaultConfig;
}
/**
*
*/
function jsonSchemaPlugin() {
return {
name: 'json-schema-plugin',