Included common markdown content dynamically using script setup

docs/syntax/block.md

@@ -6,13 +6,11 @@
 
 # Block Diagrams Documentation
 
-## Icons
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
 
-Here is a brief explanation of the icons used in the documentation:
-
-> **Note**
-> 🔥: Indicates newly added diagrams.<br>
-> -beta: Marks diagrams with experimental syntax that might change over time.
+<IconsNote />
 
 ## Introduction to Block Diagrams
 

docs/syntax/c4.md

@@ -6,6 +6,12 @@
 
 # C4 Diagrams
 
+<script setup>
+import IconsNote from './icons-note.md'
+</script>
+
+<IconsNote />
+
 > C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
 
 Mermaid's C4 diagram syntax is compatible with plantUML. See example below:

docs/syntax/classDiagram.md

@@ -6,6 +6,12 @@
 
 # Class diagrams
 
+<script setup>
+import IconsNote from './icons-note.md'
+</script>
+
+<IconsNote />
+
 > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
 >
 > -Wikipedia

docs/syntax/entityRelationshipDiagram.md

@@ -6,6 +6,12 @@
 
 # Entity Relationship Diagrams
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types) [Wikipedia](https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model).
 
 Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.

docs/syntax/examples.md

@@ -6,6 +6,12 @@
 
 # Examples
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
 
 **If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../config/usage.md?id=usage).**

docs/syntax/flowchart.md

@@ -6,6 +6,12 @@
 
 # Flowcharts - Basic Syntax
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.
 
 > **Warning**

docs/syntax/gantt.md

@@ -6,6 +6,12 @@
 
 # Gantt diagrams
 
+<script setup>
+import IconsNote from './icons-note.md'
+</script>
+
+<IconsNote />
+
 > A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
 
 ## A note to users

docs/syntax/gitgraph.md

@@ -6,6 +6,12 @@
 
 # Gitgraph Diagrams
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 > A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
 
 These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.

docs/syntax/icons-note.md

@@ -0,0 +1,13 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/icons-note.md](../../packages/mermaid/src/docs/syntax/icons-note.md).
+
+## Icons
+
+Here is a brief explanation of the icons used in the documentation:
+
+> **Note**
+> 🔥: Indicates newly added diagrams.<br>
+> -beta: Marks diagrams with experimental syntax that might change over time.

docs/syntax/mindmap.md

@@ -6,6 +6,12 @@
 
 # Mindmap
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 > Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
 
 "A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia

docs/syntax/packet.md

@@ -6,6 +6,12 @@
 
 # Packet Diagram (v\<MERMAID_RELEASE_VERSION>+)
 
+<script setup>
+import IconsNote from './icons-note.md'
+</script>
+
+<IconsNote />
+
 ## Introduction
 
 A packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network.

docs/syntax/pie.md

@@ -6,6 +6,12 @@
 
 # Pie chart diagrams
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
 > -Wikipedia
 

docs/syntax/quadrantChart.md

@@ -6,6 +6,12 @@
 
 # Quadrant Chart
 
+<script setup>
+import IconsNote from './icons-note.md'
+</script>
+
+<IconsNote />
+
 > A quadrant chart is a visual representation of data that is divided into four quadrants. It is used to plot data points on a two-dimensional grid, with one variable represented on the x-axis and another variable represented on the y-axis. The quadrants are determined by dividing the chart into four equal parts based on a set of criteria that is specific to the data being analyzed. Quadrant charts are often used to identify patterns and trends in data, and to prioritize actions based on the position of data points within the chart. They are commonly used in business, marketing, and risk management, among other fields.
 
 ## Example

docs/syntax/requirementDiagram.md

@@ -6,6 +6,12 @@
 
 # Requirement Diagram
 
+<script setup>
+import IconsNote from './icons-note.md'
+</script>
+
+<IconsNote />
+
 > A Requirement diagram provides a visualization for requirements and their connections, to each other and other documented elements. The modeling specs follow those defined by SysML v1.6.
 
 Rendering requirements is straightforward.

docs/syntax/sankey.md

@@ -6,6 +6,12 @@
 
 # Sankey diagram (v10.3.0+)
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 > A sankey diagram is a visualization used to depict a flow from one set of values to another.
 
 > **Warning**

docs/syntax/sequenceDiagram.md

@@ -6,6 +6,12 @@
 
 # Sequence diagrams
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
 
 Mermaid can render sequence diagrams.

docs/syntax/stateDiagram.md

@@ -6,6 +6,12 @@
 
 # State diagrams
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 > "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems.
 > State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the
 > case, while at other times this is a reasonable abstraction." Wikipedia

docs/syntax/timeline.md

@@ -6,6 +6,12 @@
 
 # Timeline Diagram
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 > Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
 
 "A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life" [(Wikipedia)](https://en.wikipedia.org/wiki/Timeline).

docs/syntax/userJourney.md

@@ -6,6 +6,12 @@
 
 # User Journey Diagram
 
+<script setup>
+import IconsNote from './icons-note.md'
+</script>
+
+<IconsNote />
+
 > User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
 
 Mermaid can render user journey diagrams:

docs/syntax/xyChart.md

@@ -6,13 +6,11 @@
 
 # XY Chart
 
-## Icons
+<script setup>
+import IconsNote from './icons-note.md'
+</script>
 
-Here is a brief explanation of the icons used in the documentation:
-
-> **Note**
-> 🔥: Indicates newly added diagrams.<br>
-> -beta: Marks diagrams with experimental syntax that might change over time.
+<IconsNote />
 
 > In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.
 

docs/syntax/zenuml.md

@@ -6,6 +6,12 @@
 
 # ZenUML
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
 
 Mermaid can render sequence diagrams with [ZenUML](https://zenuml.com). Note that ZenUML uses a different

packages/mermaid/src/docs/syntax/block.md

@@ -5,14 +5,11 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
 
 # Block Diagrams Documentation
 
-## Icons
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
 
-Here is a brief explanation of the icons used in the documentation:
-
-```note
-🔥: Indicates newly added diagrams.<br>
--beta: Marks diagrams with experimental syntax that might change over time.
-```
+<IconsNote />
 
 ## Introduction to Block Diagrams
 

packages/mermaid/src/docs/syntax/c4.md

@@ -1,5 +1,11 @@
 # C4 Diagrams
 
+<script setup>
+import IconsNote from './icons-note.md'
+</script>
+
+<IconsNote />
+
 > C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
 
 Mermaid's C4 diagram syntax is compatible with plantUML. See example below:

packages/mermaid/src/docs/syntax/classDiagram.md

@@ -1,5 +1,11 @@
 # Class diagrams
 
+<script setup>
+import IconsNote from './icons-note.md'
+</script>
+
+<IconsNote />
+
 > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
 >
 > -Wikipedia

packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md

@@ -1,5 +1,11 @@
 # Entity Relationship Diagrams
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types) [Wikipedia](https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model).
 
 Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.

packages/mermaid/src/docs/syntax/examples.md

@@ -1,5 +1,11 @@
 # Examples
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
 
 **If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../config/usage.md?id=usage).**

packages/mermaid/src/docs/syntax/flowchart.md

@@ -4,6 +4,12 @@ title: Flowcharts Syntax
 
 # Flowcharts - Basic Syntax
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.
 
 ```warning

packages/mermaid/src/docs/syntax/gantt.md

@@ -1,5 +1,11 @@
 # Gantt diagrams
 
+<script setup>
+import IconsNote from './icons-note.md'
+</script>
+
+<IconsNote />
+
 > A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
 
 ## A note to users

packages/mermaid/src/docs/syntax/gitgraph.md

@@ -1,5 +1,11 @@
 # Gitgraph Diagrams
 
+<script setup>
+import IconsNote from './icons-note.md' 
+</script>
+
+<IconsNote />
+
 > A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
 
 These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.

packages/mermaid/src/docs/syntax/icons-note.md

@@ -0,0 +1,8 @@
+## Icons
+
+Here is a brief explanation of the icons used in the documentation:
+
+```note
+🔥: Indicates newly added diagrams.<br>
+-beta: Marks diagrams with experimental syntax that might change over time.
+```