diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 1127a492f..f8722e580 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -65,9 +65,12 @@
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
+
+
+flowchart LR
+ A-- "X" -->B
block-beta
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 7a9b891c4..3d94055be 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -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)
---
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index a1992c225..9516d2b46 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -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
diff --git a/docs/intro/examples.md b/docs/intro/examples.md
deleted file mode 100644
index a7089ea9d..000000000
--- a/docs/intro/examples.md
+++ /dev/null
@@ -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
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
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]
-```
diff --git a/docs/syntax/block.md b/docs/syntax/block.md
index 29c5d7674..c33f31301 100644
--- a/docs/syntax/block.md
+++ b/docs/syntax/block.md
@@ -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<[" "]>(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<[" "]>(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<[" "]>(right) Backend
+ space:2 down<[" "]>(down)
+ Disk left<[" "]>(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<[" "]>(right) Backend
+ space:2 down<[" "]>(down)
+ Disk left<[" "]>(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<[" "]>(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<[" "]>(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;
```
diff --git a/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js b/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js
index c49c30f4e..a34ba02dd 100644
--- a/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js
@@ -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) {
diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md
index b1067d5b3..9186d68c6 100644
--- a/packages/mermaid/src/docs/syntax/block.md
+++ b/packages/mermaid/src/docs/syntax/block.md
@@ -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<[" "]>(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<[" "]>(right) Backend
+ space:2 down<[" "]>(down)
+ Disk left<[" "]>(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<[" "]>(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;
```
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f6f1897f6..e39424af0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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:
diff --git a/vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs b/vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs
index a08d96e7f..7896fdd2c 100644
--- a/vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs
+++ b/vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs
@@ -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',