From a6933d9451f514c8ca07df86e1bef78f266debff Mon Sep 17 00:00:00 2001 From: Siddharth Date: Thu, 1 Aug 2024 16:24:42 +0530 Subject: [PATCH 1/3] Update docs: add icon and info box explanations --- docs/syntax/block.md | 5 +++++ docs/syntax/xyChart.md | 5 +++++ packages/mermaid/src/docs/syntax/block.md | 5 +++++ packages/mermaid/src/docs/syntax/xyChart.md | 5 +++++ 4 files changed, 20 insertions(+) diff --git a/docs/syntax/block.md b/docs/syntax/block.md index df367fab1e..83c0727cd0 100644 --- a/docs/syntax/block.md +++ b/docs/syntax/block.md @@ -6,6 +6,11 @@ # Block Diagrams Documentation +**Icons:** + +- 🔥: Indicates newly added diagrams. +- `-beta`: Marks diagrams with experimental syntax that might change over time. + ## Introduction to Block Diagrams ```mermaid-example diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 7197b984d5..8e733ef807 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -6,6 +6,11 @@ # XY Chart +**Icons:** + +- 🔥: Indicates newly added diagrams. +- `-beta`: Marks diagrams with experimental syntax that might change over time. + > 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. > It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time. diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md index 7c5907dc7e..a8b888bbde 100644 --- a/packages/mermaid/src/docs/syntax/block.md +++ b/packages/mermaid/src/docs/syntax/block.md @@ -5,6 +5,11 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress # Block Diagrams Documentation +**Icons:** + +- 🔥: Indicates newly added diagrams. +- `-beta`: Marks diagrams with experimental syntax that might change over time. + ## Introduction to Block Diagrams ```mermaid diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index e6e969462e..b469b8c764 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -1,5 +1,10 @@ # XY Chart +**Icons:** + +- 🔥: Indicates newly added diagrams. +- `-beta`: Marks diagrams with experimental syntax that might change over time. + > 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. > It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time. From 145e615a75329fdbdf1b732d8c61e25173040f81 Mon Sep 17 00:00:00 2001 From: Siddharth Date: Thu, 1 Aug 2024 17:30:05 +0530 Subject: [PATCH 2/3] Added icon explanations in documentation --- docs/syntax/block.md | 9 ++++++--- docs/syntax/xyChart.md | 9 ++++++--- packages/mermaid/src/docs/syntax/block.md | 10 +++++++--- packages/mermaid/src/docs/syntax/xyChart.md | 10 +++++++--- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/docs/syntax/block.md b/docs/syntax/block.md index 83c0727cd0..7324c519dc 100644 --- a/docs/syntax/block.md +++ b/docs/syntax/block.md @@ -6,10 +6,13 @@ # Block Diagrams Documentation -**Icons:** +## Icons -- 🔥: Indicates newly added diagrams. -- `-beta`: Marks diagrams with experimental syntax that might change over time. +Here is a brief explanation of the icons used in the documentation: + +> **Note** +> 🔥: Indicates newly added diagrams.
+> -beta: Marks diagrams with experimental syntax that might change over time. ## Introduction to Block Diagrams diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 8e733ef807..eac723f035 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -6,10 +6,13 @@ # XY Chart -**Icons:** +## Icons -- 🔥: Indicates newly added diagrams. -- `-beta`: Marks diagrams with experimental syntax that might change over time. +Here is a brief explanation of the icons used in the documentation: + +> **Note** +> 🔥: Indicates newly added diagrams.
+> -beta: Marks diagrams with experimental syntax that might change over time. > 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. diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md index a8b888bbde..5e50ba2bef 100644 --- a/packages/mermaid/src/docs/syntax/block.md +++ b/packages/mermaid/src/docs/syntax/block.md @@ -5,10 +5,14 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress # Block Diagrams Documentation -**Icons:** +## Icons -- 🔥: Indicates newly added diagrams. -- `-beta`: Marks diagrams with experimental syntax that might change over time. +Here is a brief explanation of the icons used in the documentation: + +```note +🔥: Indicates newly added diagrams.
+-beta: Marks diagrams with experimental syntax that might change over time. +``` ## Introduction to Block Diagrams diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index b469b8c764..18dcff3fb2 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -1,9 +1,13 @@ # XY Chart -**Icons:** +## Icons -- 🔥: Indicates newly added diagrams. -- `-beta`: Marks diagrams with experimental syntax that might change over time. +Here is a brief explanation of the icons used in the documentation: + +```note +🔥: Indicates newly added diagrams.
+-beta: Marks diagrams with experimental syntax that might change over time. +``` > 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. From 2d48b02aaf509d9ee1ddfd26908074cf6e71af44 Mon Sep 17 00:00:00 2001 From: Siddharth Date: Mon, 5 Aug 2024 23:53:56 +0530 Subject: [PATCH 3/3] Included common markdown content dynamically using script setup --- docs/syntax/block.md | 10 ++++------ docs/syntax/c4.md | 6 ++++++ docs/syntax/classDiagram.md | 6 ++++++ docs/syntax/entityRelationshipDiagram.md | 6 ++++++ docs/syntax/examples.md | 6 ++++++ docs/syntax/flowchart.md | 6 ++++++ docs/syntax/gantt.md | 6 ++++++ docs/syntax/gitgraph.md | 6 ++++++ docs/syntax/icons-note.md | 13 +++++++++++++ docs/syntax/mindmap.md | 6 ++++++ docs/syntax/packet.md | 6 ++++++ docs/syntax/pie.md | 6 ++++++ docs/syntax/quadrantChart.md | 6 ++++++ docs/syntax/requirementDiagram.md | 6 ++++++ docs/syntax/sankey.md | 6 ++++++ docs/syntax/sequenceDiagram.md | 6 ++++++ docs/syntax/stateDiagram.md | 6 ++++++ docs/syntax/timeline.md | 6 ++++++ docs/syntax/userJourney.md | 6 ++++++ docs/syntax/xyChart.md | 10 ++++------ docs/syntax/zenuml.md | 6 ++++++ packages/mermaid/src/docs/syntax/block.md | 11 ++++------- packages/mermaid/src/docs/syntax/c4.md | 6 ++++++ packages/mermaid/src/docs/syntax/classDiagram.md | 6 ++++++ .../src/docs/syntax/entityRelationshipDiagram.md | 6 ++++++ packages/mermaid/src/docs/syntax/examples.md | 6 ++++++ packages/mermaid/src/docs/syntax/flowchart.md | 6 ++++++ packages/mermaid/src/docs/syntax/gantt.md | 6 ++++++ packages/mermaid/src/docs/syntax/gitgraph.md | 6 ++++++ packages/mermaid/src/docs/syntax/icons-note.md | 8 ++++++++ packages/mermaid/src/docs/syntax/mindmap.md | 6 ++++++ packages/mermaid/src/docs/syntax/packet.md | 6 ++++++ packages/mermaid/src/docs/syntax/pie.md | 6 ++++++ packages/mermaid/src/docs/syntax/quadrantChart.md | 6 ++++++ .../mermaid/src/docs/syntax/requirementDiagram.md | 6 ++++++ packages/mermaid/src/docs/syntax/sankey.md | 6 ++++++ packages/mermaid/src/docs/syntax/sequenceDiagram.md | 6 ++++++ packages/mermaid/src/docs/syntax/stateDiagram.md | 6 ++++++ packages/mermaid/src/docs/syntax/timeline.md | 6 ++++++ packages/mermaid/src/docs/syntax/userJourney.md | 6 ++++++ packages/mermaid/src/docs/syntax/xyChart.md | 11 ++++------- packages/mermaid/src/docs/syntax/zenuml.md | 6 ++++++ 42 files changed, 253 insertions(+), 26 deletions(-) create mode 100644 docs/syntax/icons-note.md create mode 100644 packages/mermaid/src/docs/syntax/icons-note.md diff --git a/docs/syntax/block.md b/docs/syntax/block.md index 7324c519dc..cb6d86027b 100644 --- a/docs/syntax/block.md +++ b/docs/syntax/block.md @@ -6,13 +6,11 @@ # Block Diagrams Documentation -## Icons + -Here is a brief explanation of the icons used in the documentation: - -> **Note** -> 🔥: Indicates newly added diagrams.
-> -beta: Marks diagrams with experimental syntax that might change over time. + ## Introduction to Block Diagrams diff --git a/docs/syntax/c4.md b/docs/syntax/c4.md index 55f3940d71..47e37780fd 100644 --- a/docs/syntax/c4.md +++ b/docs/syntax/c4.md @@ -6,6 +6,12 @@ # C4 Diagrams + + + + > 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: diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md index ed15922f13..f9c6898abf 100644 --- a/docs/syntax/classDiagram.md +++ b/docs/syntax/classDiagram.md @@ -6,6 +6,12 @@ # Class diagrams + + + + > "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 diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md index ae84d1e9ef..5c32cc3532 100644 --- a/docs/syntax/entityRelationshipDiagram.md +++ b/docs/syntax/entityRelationshipDiagram.md @@ -6,6 +6,12 @@ # Entity Relationship Diagrams + + + + > 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. diff --git a/docs/syntax/examples.md b/docs/syntax/examples.md index 2d99cc0252..17204d74c4 100644 --- a/docs/syntax/examples.md +++ b/docs/syntax/examples.md @@ -6,6 +6,12 @@ # Examples + + + + 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).** diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 7efc5497b6..7469889624 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -6,6 +6,12 @@ # Flowcharts - Basic Syntax + + + + 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** diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 31bac5e29a..a6dd773321 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -6,6 +6,12 @@ # Gantt diagrams + + + + > 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 diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md index 9403f2a334..dc4c7f791c 100644 --- a/docs/syntax/gitgraph.md +++ b/docs/syntax/gitgraph.md @@ -6,6 +6,12 @@ # Gitgraph Diagrams + + + + > 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. diff --git a/docs/syntax/icons-note.md b/docs/syntax/icons-note.md new file mode 100644 index 0000000000..cde0fc2ba6 --- /dev/null +++ b/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.
+> -beta: Marks diagrams with experimental syntax that might change over time. diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md index dfdcdbdac4..9b2bfbbf9c 100644 --- a/docs/syntax/mindmap.md +++ b/docs/syntax/mindmap.md @@ -6,6 +6,12 @@ # Mindmap + + + + > 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 diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index 3fe7b119e8..dbed992f69 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -6,6 +6,12 @@ # Packet Diagram (v\+) + + + + ## 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. diff --git a/docs/syntax/pie.md b/docs/syntax/pie.md index 2a47f18d4f..367dcd6ccb 100644 --- a/docs/syntax/pie.md +++ b/docs/syntax/pie.md @@ -6,6 +6,12 @@ # Pie chart diagrams + + + + > 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 diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md index ba80638452..8762665e3c 100644 --- a/docs/syntax/quadrantChart.md +++ b/docs/syntax/quadrantChart.md @@ -6,6 +6,12 @@ # Quadrant Chart + + + + > 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 diff --git a/docs/syntax/requirementDiagram.md b/docs/syntax/requirementDiagram.md index 01fdf19449..03c71031f2 100644 --- a/docs/syntax/requirementDiagram.md +++ b/docs/syntax/requirementDiagram.md @@ -6,6 +6,12 @@ # Requirement Diagram + + + + > 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. diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md index ccabc11c97..bd8ed4dfed 100644 --- a/docs/syntax/sankey.md +++ b/docs/syntax/sankey.md @@ -6,6 +6,12 @@ # Sankey diagram (v10.3.0+) + + + + > A sankey diagram is a visualization used to depict a flow from one set of values to another. > **Warning** diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index 0f0d632138..17bf8a773c 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -6,6 +6,12 @@ # Sequence diagrams + + + + > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. Mermaid can render sequence diagrams. diff --git a/docs/syntax/stateDiagram.md b/docs/syntax/stateDiagram.md index e532678f0a..8cb5c67c7a 100644 --- a/docs/syntax/stateDiagram.md +++ b/docs/syntax/stateDiagram.md @@ -6,6 +6,12 @@ # State diagrams + + + + > "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 diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index 3d476c41d2..d69c7c47b1 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -6,6 +6,12 @@ # Timeline Diagram + + + + > 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). diff --git a/docs/syntax/userJourney.md b/docs/syntax/userJourney.md index 73fcb7468e..4953e3e54d 100644 --- a/docs/syntax/userJourney.md +++ b/docs/syntax/userJourney.md @@ -6,6 +6,12 @@ # User Journey Diagram + + + + > 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: diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index eac723f035..2f6170b1de 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -6,13 +6,11 @@ # XY Chart -## Icons + -Here is a brief explanation of the icons used in the documentation: - -> **Note** -> 🔥: Indicates newly added diagrams.
-> -beta: Marks diagrams with experimental syntax that might change over time. + > 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. diff --git a/docs/syntax/zenuml.md b/docs/syntax/zenuml.md index 6df13fd1df..deeef9e895 100644 --- a/docs/syntax/zenuml.md +++ b/docs/syntax/zenuml.md @@ -6,6 +6,12 @@ # ZenUML + + + + > 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 diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md index 5e50ba2bef..9e5a8db255 100644 --- a/packages/mermaid/src/docs/syntax/block.md +++ b/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 + -Here is a brief explanation of the icons used in the documentation: - -```note -🔥: Indicates newly added diagrams.
--beta: Marks diagrams with experimental syntax that might change over time. -``` + ## Introduction to Block Diagrams diff --git a/packages/mermaid/src/docs/syntax/c4.md b/packages/mermaid/src/docs/syntax/c4.md index 81120d3c06..f0182c1709 100644 --- a/packages/mermaid/src/docs/syntax/c4.md +++ b/packages/mermaid/src/docs/syntax/c4.md @@ -1,5 +1,11 @@ # C4 Diagrams + + + + > 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: diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md index 029d11b540..849a981fc7 100644 --- a/packages/mermaid/src/docs/syntax/classDiagram.md +++ b/packages/mermaid/src/docs/syntax/classDiagram.md @@ -1,5 +1,11 @@ # Class diagrams + + + + > "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 diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md index 3b874f6893..4aebe86e5e 100644 --- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md +++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md @@ -1,5 +1,11 @@ # Entity Relationship Diagrams + + + + > 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. diff --git a/packages/mermaid/src/docs/syntax/examples.md b/packages/mermaid/src/docs/syntax/examples.md index 64e85815f3..d4ddfcf670 100644 --- a/packages/mermaid/src/docs/syntax/examples.md +++ b/packages/mermaid/src/docs/syntax/examples.md @@ -1,5 +1,11 @@ # Examples + + + + 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).** diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index acffbc6931..2f5cf8c11f 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -4,6 +4,12 @@ title: Flowcharts Syntax # Flowcharts - Basic Syntax + + + + 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 diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index 8497b96a13..e628d8e562 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -1,5 +1,11 @@ # Gantt diagrams + + + + > 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 diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md index d0791718b8..a41ebb2232 100644 --- a/packages/mermaid/src/docs/syntax/gitgraph.md +++ b/packages/mermaid/src/docs/syntax/gitgraph.md @@ -1,5 +1,11 @@ # Gitgraph Diagrams + + + + > 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. diff --git a/packages/mermaid/src/docs/syntax/icons-note.md b/packages/mermaid/src/docs/syntax/icons-note.md new file mode 100644 index 0000000000..f2d35e3d13 --- /dev/null +++ b/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.
+-beta: Marks diagrams with experimental syntax that might change over time. +``` diff --git a/packages/mermaid/src/docs/syntax/mindmap.md b/packages/mermaid/src/docs/syntax/mindmap.md index 07face7f3e..a298cea8c9 100644 --- a/packages/mermaid/src/docs/syntax/mindmap.md +++ b/packages/mermaid/src/docs/syntax/mindmap.md @@ -1,5 +1,11 @@ # Mindmap + + + + > 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 diff --git a/packages/mermaid/src/docs/syntax/packet.md b/packages/mermaid/src/docs/syntax/packet.md index 52a0de8873..cd99ef7eb8 100644 --- a/packages/mermaid/src/docs/syntax/packet.md +++ b/packages/mermaid/src/docs/syntax/packet.md @@ -1,5 +1,11 @@ # Packet Diagram (v+) + + + + ## 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. diff --git a/packages/mermaid/src/docs/syntax/pie.md b/packages/mermaid/src/docs/syntax/pie.md index 81ec720c4f..0c43f36d9f 100644 --- a/packages/mermaid/src/docs/syntax/pie.md +++ b/packages/mermaid/src/docs/syntax/pie.md @@ -1,5 +1,11 @@ # Pie chart diagrams + + + + > 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 diff --git a/packages/mermaid/src/docs/syntax/quadrantChart.md b/packages/mermaid/src/docs/syntax/quadrantChart.md index 39bbcafa1c..fb8352fdac 100644 --- a/packages/mermaid/src/docs/syntax/quadrantChart.md +++ b/packages/mermaid/src/docs/syntax/quadrantChart.md @@ -1,5 +1,11 @@ # Quadrant Chart + + + + > 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 diff --git a/packages/mermaid/src/docs/syntax/requirementDiagram.md b/packages/mermaid/src/docs/syntax/requirementDiagram.md index be46b73cc4..5debe46ce5 100644 --- a/packages/mermaid/src/docs/syntax/requirementDiagram.md +++ b/packages/mermaid/src/docs/syntax/requirementDiagram.md @@ -1,5 +1,11 @@ # Requirement Diagram + + + + > 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. diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md index 6b7c359e35..fd98127fe9 100644 --- a/packages/mermaid/src/docs/syntax/sankey.md +++ b/packages/mermaid/src/docs/syntax/sankey.md @@ -1,5 +1,11 @@ # Sankey diagram (v10.3.0+) + + + + > A sankey diagram is a visualization used to depict a flow from one set of values to another. ```warning diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index 249f7bde03..248532de97 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -1,5 +1,11 @@ # Sequence diagrams + + + + > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. Mermaid can render sequence diagrams. diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md index 9d99ab93b9..8036de4753 100644 --- a/packages/mermaid/src/docs/syntax/stateDiagram.md +++ b/packages/mermaid/src/docs/syntax/stateDiagram.md @@ -1,5 +1,11 @@ # State diagrams + + + + > "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 diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index 165fd62607..1b7201e37e 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -1,5 +1,11 @@ # Timeline Diagram + + + + > 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). diff --git a/packages/mermaid/src/docs/syntax/userJourney.md b/packages/mermaid/src/docs/syntax/userJourney.md index 3476088aba..5d39628d7b 100644 --- a/packages/mermaid/src/docs/syntax/userJourney.md +++ b/packages/mermaid/src/docs/syntax/userJourney.md @@ -1,5 +1,11 @@ # User Journey Diagram + + + + > 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: diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 18dcff3fb2..ad6ab764f6 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -1,13 +1,10 @@ # XY Chart -## Icons + -Here is a brief explanation of the icons used in the documentation: - -```note -🔥: Indicates newly added diagrams.
--beta: Marks diagrams with experimental syntax that might change over time. -``` + > 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. diff --git a/packages/mermaid/src/docs/syntax/zenuml.md b/packages/mermaid/src/docs/syntax/zenuml.md index 292c0f1c19..ad0e47ed90 100644 --- a/packages/mermaid/src/docs/syntax/zenuml.md +++ b/packages/mermaid/src/docs/syntax/zenuml.md @@ -1,5 +1,11 @@ # ZenUML + + + + > 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