diff --git a/docs/book/class.png b/docs/book/class.png deleted file mode 100644 index 5b2f663d8..000000000 Binary files a/docs/book/class.png and /dev/null differ diff --git a/docs/book/cover.jpg b/docs/book/cover.jpg deleted file mode 100644 index 24f8b13bf..000000000 Binary files a/docs/book/cover.jpg and /dev/null differ diff --git a/docs/book/er.png b/docs/book/er.png deleted file mode 100644 index e3d8dd7ca..000000000 Binary files a/docs/book/er.png and /dev/null differ diff --git a/docs/book/flowchart.png b/docs/book/flowchart.png deleted file mode 100644 index 714626b70..000000000 Binary files a/docs/book/flowchart.png and /dev/null differ diff --git a/docs/book/gantt.png b/docs/book/gantt.png deleted file mode 100644 index 95c8d08a1..000000000 Binary files a/docs/book/gantt.png and /dev/null differ diff --git a/docs/book/index.html b/docs/book/index.html deleted file mode 100644 index 4e3ab79f8..000000000 --- a/docs/book/index.html +++ /dev/null @@ -1,340 +0,0 @@ - - - - - - - The Official Guide to Mermaid.js - - - - - - - - - - - - - - - - -
-
- -
-
-
-

MermaidPress

-

- The Official Guide to Mermaid.js -

-

- Learn to create complex diagrams and beautiful flowcharts easily using text and code - using Mermaid.js. -

- - - -
-
-
- -
- -
-
-
-
- - - - - - - - - - - - -
-
-
-

- Get up to speed with using Mermaid diagrams along with real-world examples and expert tips - from the authors to facilitate a seamless development workflow -

-
-
-
-
-
-

- Flowcharts is a diagram type that visualizes a process or an algorithm by showing the - steps in order, as well as the different paths the execution can take. -

-
-
- -
-
-
-
- -
-
-
-

- Sequence diagrams lets you model and visualize interactions between different actors - or objects in a system, as well as the order of those interactions -

-
-
-
-
-
-

- A class diagram is a graphical representation that is used to visualize and describe - an object-oriented system. -

-
-
- -
-
-
-
- -
-
-
-

- An entity-relationship diagram is a graphical representation that is used to - visualize the different types of entities that exist within a system. -

-
-
-
-
-
-

- Use State diagrams to model and document state machines, an abstract way of - representing a system or an algorithm. -

-
-
- -
-
-
-
- -
-
-
-

- A Gantt chart is a graphical representation that is used to visualize and describe - tasks (events or activities) over time. -

-
-
-
-
-

- These were a few of the diagrams supported by Mermaid. -

-
- -
-
-

- Book description -

-
-

- Mermaid lets you represent diagrams using text and code which simplifies the maintenance - of complex diagrams. This is a great option for developers as they’re more familiar with - code, rather than special tools for generating diagrams. Besides, diagrams in code - simplify maintenance and ensure that the code is supported by version control systems. - In some cases, Mermaid makes refactoring support for name changes possible while also - enabling team collaboration for review distribution and updates. -

-

- Developers working with any system will be able to put their knowledge to work with this - practical guide to using Mermaid for documentation. The book is also a great reference - for looking up the syntax for specific diagrams when authoring diagrams. -

-

- You’ll start by getting up to speed with the importance of accurate and visual - documentation. Next, the book introduces Mermaid and establishes how to use it to create - effective documentation. By using different tools, editors, or a custom documentation - platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later - chapters cover advanced configuration settings and theme options to manipulate your - diagram as per your needs. -

-

- By the end of this Mermaid book, you’ll have become well-versed with the different types - of Mermaid diagrams and how they can be used in your workflows. -

-
-
-
-
-
-

- What you will learn -

-
-
-
-
-
-
-
    -
  • - Understand good and bad documentation, and the art of effective documentation -
    • -
  • - Become well-versed with maintaining complex diagrams with ease -
    • -
  • - Learn how to set up a custom documentation system -
    • -
  • - Learn how to implement Mermaid diagrams in your workflows -
    • -
  • - Understand how to set up themes for a Mermaid diagram for an entire site -
    • -
  • - Discover how to draw different types of diagrams such as flowcharts, class - diagrams, Gantt charts, and more -
    • -
-
-
-
-
-
- - - - - - - - - - - - - - - - - -
-

- Purchase The Official Guide to Mermaid.js -

-
-
-
-

-

Written by Knut Sveidqvist and Ashish Jain.

-

- Knut is the creator of Mermaid and both authors are active core team members of the - Mermaid open-source project. -

-

- - - -
- - - diff --git a/docs/book/sequence-diagram.png b/docs/book/sequence-diagram.png deleted file mode 100644 index 8c51ac1c5..000000000 Binary files a/docs/book/sequence-diagram.png and /dev/null differ diff --git a/docs/book/state.png b/docs/book/state.png deleted file mode 100644 index 2ef66ea2f..000000000 Binary files a/docs/book/state.png and /dev/null differ diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 8b3859f8a..44d538bc2 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -839,6 +839,10 @@ In the example below the style defined in the linkStyle statement will belong to linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; +It is also possible to add style to multiple links in a single statement, by separating link numbers with commas: + + linkStyle 1,2,7 color:blue; + ### Styling line curves It is possible to style the type of curve used for lines between items, if the default method does not meet your needs. @@ -877,10 +881,14 @@ flowchart LR More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that should have a different look. -a class definition looks like the example below: +A class definition looks like the example below: classDef className fill:#f9f,stroke:#333,stroke-width:4px; +Also, it is possible to define style to multiple classes in one statement: + + classDef firstClassName,secondClassName font-size:12pt; + Attachment of a class to a node is done as per below: class nodeId1 className; diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 7f8284a2f..5cd8f1089 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -544,6 +544,12 @@ In the example below the style defined in the linkStyle statement will belong to linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; ``` +It is also possible to add style to multiple links in a single statement, by separating link numbers with commas: + +``` +linkStyle 1,2,7 color:blue; +``` + ### Styling line curves It is possible to style the type of curve used for lines between items, if the default method does not meet your needs. @@ -577,12 +583,18 @@ flowchart LR More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that should have a different look. -a class definition looks like the example below: +A class definition looks like the example below: ``` classDef className fill:#f9f,stroke:#333,stroke-width:4px; ``` +Also, it is possible to define style to multiple classes in one statement: + +``` + classDef firstClassName,secondClassName font-size:12pt; +``` + Attachment of a class to a node is done as per below: ```