From 3c69bd34c74bcf98040df25d439266d73ef073c1 Mon Sep 17 00:00:00 2001 From: Josh Soref <2119212+jsoref@users.noreply.github.com> Date: Thu, 17 Apr 2025 06:46:00 -0400 Subject: [PATCH 1/3] chore: Remove duplicate `mermaid` blocks --- packages/mermaid/src/docs/config/theming.md | 36 --------------------- 1 file changed, 36 deletions(-) diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index 5643dc7fb..f9afb15b8 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -41,12 +41,6 @@ Example of `init` directive setting the `theme` to `forest`: a --> b ``` -```mermaid -%%{init: {'theme':'forest'}}%% - graph TD - a --> b -``` - > **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations. ## Customizing Themes with `themeVariables` @@ -91,36 +85,6 @@ Example of modifying `themeVariables` using the `init` directive: end ``` -```mermaid -%%{ - init: { - 'theme': 'base', - 'themeVariables': { - 'primaryColor': '#BB2528', - 'primaryTextColor': '#fff', - 'primaryBorderColor': '#7C0000', - 'lineColor': '#F8B229', - 'secondaryColor': '#006100', - 'tertiaryColor': '#fff' - } - } -}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - ## Color and Color Calculation To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc. From c7fa906115328783abeb9b6b08075fc39d94bfca Mon Sep 17 00:00:00 2001 From: Josh Soref <2119212+jsoref@users.noreply.github.com> Date: Thu, 17 Apr 2025 06:50:20 -0400 Subject: [PATCH 2/3] chore: Change `mermaid` blocks to `mermaid-example` in docs --- packages/mermaid/src/docs/config/8.6.0_docs.md | 2 +- packages/mermaid/src/docs/config/directives.md | 2 +- packages/mermaid/src/docs/config/math.md | 4 ++-- packages/mermaid/src/docs/intro/getting-started.md | 2 +- packages/mermaid/src/docs/intro/syntax-reference.md | 4 ++-- packages/mermaid/src/docs/syntax/block.md | 2 +- packages/mermaid/src/docs/syntax/classDiagram.md | 2 +- packages/mermaid/src/docs/syntax/examples.md | 2 +- packages/mermaid/src/docs/syntax/gantt.md | 2 +- packages/mermaid/src/docs/syntax/sequenceDiagram.md | 2 +- 10 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/mermaid/src/docs/config/8.6.0_docs.md b/packages/mermaid/src/docs/config/8.6.0_docs.md index efd29bfdc..342e05763 100644 --- a/packages/mermaid/src/docs/config/8.6.0_docs.md +++ b/packages/mermaid/src/docs/config/8.6.0_docs.md @@ -75,7 +75,7 @@ When deployed within code, init is called before the graph/diagram description. **for example**: -```mermaid +```mermaid-example %%{init: {"theme": "default", "logLevel": 1 }}%% graph LR a-->b diff --git a/packages/mermaid/src/docs/config/directives.md b/packages/mermaid/src/docs/config/directives.md index 0e211161c..017fc486b 100644 --- a/packages/mermaid/src/docs/config/directives.md +++ b/packages/mermaid/src/docs/config/directives.md @@ -88,7 +88,7 @@ Here the directive declaration will set the `logLevel` to `debug` and the `theme Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. -```mermaid +```mermaid-example %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%% ... diff --git a/packages/mermaid/src/docs/config/math.md b/packages/mermaid/src/docs/config/math.md index a53dceaf2..bb6556b6c 100644 --- a/packages/mermaid/src/docs/config/math.md +++ b/packages/mermaid/src/docs/config/math.md @@ -10,7 +10,7 @@ Note that at the moment, the only supported diagrams are below: ### Flowcharts -```mermaid +```mermaid-example graph LR A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$") A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$") @@ -20,7 +20,7 @@ Note that at the moment, the only supported diagrams are below: ### Sequence -```mermaid +```mermaid-example sequenceDiagram autonumber participant 1 as $$\alpha$$ diff --git a/packages/mermaid/src/docs/intro/getting-started.md b/packages/mermaid/src/docs/intro/getting-started.md index 574881c4f..8e6482ae2 100644 --- a/packages/mermaid/src/docs/intro/getting-started.md +++ b/packages/mermaid/src/docs/intro/getting-started.md @@ -41,7 +41,7 @@ In the `Code` panel, write or edit Mermaid code, and instantly `Preview` the ren Here is an example of Mermaid code and its rendered result: -```mermaid +```mermaid-example graph TD A[Enter Chart Definition] --> B(Preview) B --> C{decide} diff --git a/packages/mermaid/src/docs/intro/syntax-reference.md b/packages/mermaid/src/docs/intro/syntax-reference.md index 14c56370a..b439c26bc 100644 --- a/packages/mermaid/src/docs/intro/syntax-reference.md +++ b/packages/mermaid/src/docs/intro/syntax-reference.md @@ -83,7 +83,7 @@ Mermaid offers a variety of styles or “looks” for your diagrams, allowing yo You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example: -```mermaid +```mermaid-example --- config: look: handDrawn @@ -108,7 +108,7 @@ In addition to customizing the look of your diagrams, Mermaid Chart now allows y You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example: -```mermaid +```mermaid-example --- config: layout: elk diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md index 5b8aa1c99..396f39148 100644 --- a/packages/mermaid/src/docs/syntax/block.md +++ b/packages/mermaid/src/docs/syntax/block.md @@ -7,7 +7,7 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress ## Introduction to Block Diagrams -```mermaid +```mermaid-example block-beta columns 1 db(("DB")) diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md index 552670d3f..f2cec2ec5 100644 --- a/packages/mermaid/src/docs/syntax/classDiagram.md +++ b/packages/mermaid/src/docs/syntax/classDiagram.md @@ -248,7 +248,7 @@ classE o-- classF : aggregation Relations can logically represent an N:M association: -```mermaid +```mermaid-example classDiagram Animal <|--|> Zebra ``` diff --git a/packages/mermaid/src/docs/syntax/examples.md b/packages/mermaid/src/docs/syntax/examples.md index 64e85815f..48af4dc77 100644 --- a/packages/mermaid/src/docs/syntax/examples.md +++ b/packages/mermaid/src/docs/syntax/examples.md @@ -141,7 +141,7 @@ sequenceDiagram ## A commit flow diagram. -```mermaid +```mermaid-example gitGraph: commit "Ashish" branch newbranch diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index eab35d09f..de54363bc 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -259,7 +259,7 @@ gantt The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings. -```mermaid +```mermaid-example --- displayMode: compact --- diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index 2357b9bf4..3087eb743 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -442,7 +442,7 @@ sequenceDiagram Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax -```mermaid +```mermaid-example sequenceDiagram Alice->>John: Hello John, how are you? %% this is a comment From 2a859f27394ca36d3270afa3bbeaf224a6bc9a44 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 17 Apr 2025 11:08:43 +0000 Subject: [PATCH 3/3] [autofix.ci] apply automated fixes --- docs/config/theming.md | 72 ------------------------------------------ 1 file changed, 72 deletions(-) diff --git a/docs/config/theming.md b/docs/config/theming.md index 088d9e755..f510a114a 100644 --- a/docs/config/theming.md +++ b/docs/config/theming.md @@ -53,18 +53,6 @@ Example of `init` directive setting the `theme` to `forest`: a --> b ``` -```mermaid-example -%%{init: {'theme':'forest'}}%% - graph TD - a --> b -``` - -```mermaid -%%{init: {'theme':'forest'}}%% - graph TD - a --> b -``` - > **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations. ## Customizing Themes with `themeVariables` @@ -139,66 +127,6 @@ Example of modifying `themeVariables` using the `init` directive: end ``` -```mermaid-example -%%{ - init: { - 'theme': 'base', - 'themeVariables': { - 'primaryColor': '#BB2528', - 'primaryTextColor': '#fff', - 'primaryBorderColor': '#7C0000', - 'lineColor': '#F8B229', - 'secondaryColor': '#006100', - 'tertiaryColor': '#fff' - } - } -}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -```mermaid -%%{ - init: { - 'theme': 'base', - 'themeVariables': { - 'primaryColor': '#BB2528', - 'primaryTextColor': '#fff', - 'primaryBorderColor': '#7C0000', - 'lineColor': '#F8B229', - 'secondaryColor': '#006100', - 'tertiaryColor': '#fff' - } - } -}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - ## Color and Color Calculation To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.