From 2ada935842870471ed679e7e171b9672cf844e8e Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 20 Sep 2022 22:20:18 +0530 Subject: [PATCH 1/5] This should fail CI --- docs/faq.md | 2 +- docs/index.html | 8 -------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/docs/faq.md b/docs/faq.md index ac5eeeb80..62bfeca9f 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -5,7 +5,7 @@ 1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217) 2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785) 3. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621) -4. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136) +4. [How to specify gantt diagram x Axis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136) 5. [How to bind an event?](https://github.com/knsv/mermaid/issues/372) 6. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381) 7. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735) diff --git a/docs/index.html b/docs/index.html index 22892d60b..aa5abe4f0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -146,14 +146,6 @@ if (isDarkMode) conf.theme = 'dark'; mermaid.initialize(conf); - From c343e4a1e301ff29c9d422d378c575cda9790ad7 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 20 Sep 2022 22:31:53 +0530 Subject: [PATCH 2/5] Add verification log --- docs/classDiagram.md | 17 +++++++++-- docs/faq.md | 2 +- docs/gitgraph.md | 38 ------------------------ docs/index.html | 9 ++++++ src/docs.mts | 69 ++++++++++++++++++++++---------------------- 5 files changed, 59 insertions(+), 76 deletions(-) diff --git a/docs/classDiagram.md b/docs/classDiagram.md index 6c9ae96fe..3f12dddf8 100644 --- a/docs/classDiagram.md +++ b/docs/classDiagram.md @@ -660,14 +660,27 @@ It is also possible to attach a class to a list of nodes in one statement: A shorter form of adding a class is to attach the classname to the node using the `:::` operator: -```mmd +```mermaid-example +classDiagram + class Animal:::cssClass +``` + +```mermaid classDiagram class Animal:::cssClass ``` Or: -```mmd +```mermaid-example +classDiagram + class Animal:::cssClass { + -int sizeInFeet + -canEat() + } +``` + +```mermaid classDiagram class Animal:::cssClass { -int sizeInFeet diff --git a/docs/faq.md b/docs/faq.md index 62bfeca9f..ac5eeeb80 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -5,7 +5,7 @@ 1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217) 2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785) 3. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621) -4. [How to specify gantt diagram x Axis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136) +4. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136) 5. [How to bind an event?](https://github.com/knsv/mermaid/issues/372) 6. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381) 7. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735) diff --git a/docs/gitgraph.md b/docs/gitgraph.md index 863681085..5f86cf53c 100644 --- a/docs/gitgraph.md +++ b/docs/gitgraph.md @@ -393,44 +393,6 @@ Let see an example: commit id:"C" ``` -By default, the cherry-picked commit from commit with id `A` will be labeled `cherry-pick:A`. You can provide your own custom tag instead to override this behavior, using the same syntax as the `commit` keyword: - -```mermaid-example - gitGraph - commit id: "ZERO" - branch develop - commit id:"A" - checkout main - commit id:"ONE" - checkout develop - commit id:"B" - checkout main - commit id:"TWO" - cherry-pick id:"A" tag:"fix" - commit id:"THREE" - checkout develop - commit id:"C" -``` - -```mermaid - gitGraph - commit id: "ZERO" - branch develop - commit id:"A" - checkout main - commit id:"ONE" - checkout develop - commit id:"B" - checkout main - commit id:"TWO" - cherry-pick id:"A" tag:"fix" - commit id:"THREE" - checkout develop - commit id:"C" -``` - -To suppress the tag entirely, use `tag:""` (empty string). - ## Gitgraph specific configuration options In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options: diff --git a/docs/index.html b/docs/index.html index aa5abe4f0..0a41b516c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -15,6 +15,7 @@ name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> + + diff --git a/src/docs.mts b/src/docs.mts index 06a1f4bff..15a36ddd3 100644 --- a/src/docs.mts +++ b/src/docs.mts @@ -1,11 +1,10 @@ /* eslint-disable no-console */ /** - * @file Transform documentation source files into files suitable for publishing - * and optionally copy the transformed files from the source directory to the - * directory used for the final, published documentation directory. The list - * of files transformed and copied to final documentation directory are logged - * to the console. If a file in the source directory has the same contents in + * @file Transform documentation source files into files suitable for publishing and optionally copy + * the transformed files from the source directory to the directory used for the final, published + * documentation directory. The list of files transformed and copied to final documentation + * directory are logged to the console. If a file in the source directory has the same contents in * the final directory, nothing is done (the final directory is up-to-date). * @example * docs @@ -24,12 +23,12 @@ * If the --git option is used, the command `git add docs` will be run after all transformations (and/or verifications) have completed successfully * If not files were transformed, the git command is not run. * - * @todo Ensure that the documentation source and final paths are correct by - * using process.cwd() to get their absolute paths. Ensures that the location - * of those 2 directories is not dependent on where this file resides. + * @todo Ensure that the documentation source and final paths are correct by using process.cwd() to + * get their absolute paths. Ensures that the location of those 2 directories is not dependent on + * where this file resides. * - * @todo Write a test file for this. (Will need to be able to deal .mts file. - * Jest has trouble with it.) + * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with + * it.) */ import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs'; import { exec } from 'child_process'; @@ -68,14 +67,13 @@ const prettierConfig: prettier.Config = { let filesWereTransformed = false; /** - * Given a source file name and path, return the documentation destination full - * path and file name Create the destination path if it does not already exist. + * Given a source file name and path, return the documentation destination full path and file name + * Create the destination path if it does not already exist. * * @param {string} file - Name of the file (including full path) - * @returns {string} Name of the file with the path changed from the source - * directory to final documentation directory - * @todo Possible Improvement: combine with lint-staged to only copy files that - * have changed + * @returns {string} Name of the file with the path changed from the source directory to final + * documentation directory + * @todo Possible Improvement: combine with lint-staged to only copy files that have changed */ const changeToFinalDocDir = (file: string): string => { const newDir = file.replace(SOURCE_DOCS_DIR, FINAL_DOCS_DIR); @@ -84,8 +82,8 @@ const changeToFinalDocDir = (file: string): string => { }; /** - * Log messages to the console showing if the transformed file copied to the - * final documentation directory or still needs to be copied. + * Log messages to the console showing if the transformed file copied to the final documentation + * directory or still needs to be copied. * * @param {string} filename Name of the file that was transformed * @param {boolean} wasCopied Whether or not the file was copied @@ -101,14 +99,13 @@ const logWasOrShouldBeTransformed = (filename: string, wasCopied: boolean) => { }; /** - * If the file contents were transformed, set the _filesWereTransformed_ flag to - * true and copy the transformed contents to the final documentation directory - * if the doCopy flag is true. Log messages to the console. + * If the file contents were transformed, set the _filesWereTransformed_ flag to true and copy the + * transformed contents to the final documentation directory if the doCopy flag is true. Log + * messages to the console. * * @param {string} filename Name of the file that will be verified - * @param {boolean} [doCopy=false] Whether we should copy that - * transformedContents to the final documentation directory. Default is - * `false`. Default is `false` + * @param {boolean} [doCopy=false] Whether we should copy that transformedContents to the final + * documentation directory. Default is `false`. Default is `false` * @param {string} [transformedContent] New contents for the file */ const copyTransformedContents = (filename: string, doCopy = false, transformedContent?: string) => { @@ -133,15 +130,14 @@ const readSyncedUTF8file = (filename: string): string => { }; /** - * Transform a markdown file and write the transformed file to the directory for - * published documentation + * Transform a markdown file and write the transformed file to the directory for published + * documentation * - * 1. Add a `mermaid-example` block before every `mermaid` or `mmd` block On the - * docsify site (one place where the documentation is published), this will - * show the code used for the mermaid diagram + * 1. Add a `mermaid-example` block before every `mermaid` or `mmd` block On the docsify site (one + * place where the documentation is published), this will show the code used for the mermaid + * diagram * 2. Add the text that says the file is automatically generated - * 3. Use prettier to format the file Verify that the file has been changed and - * write out the changes + * 3. Use prettier to format the file Verify that the file has been changed and write out the changes * * @param file {string} name of the file that will be verified */ @@ -168,11 +164,11 @@ const transformMarkdown = (file: string) => { }; /** - * Transform an HTML file and write the transformed file to the directory for - * published documentation + * Transform an HTML file and write the transformed file to the directory for published + * documentation * - * - Add the text that says the file is automatically generated Verify that the - * file has been changed and write out the changes + * - Add the text that says the file is automatically generated Verify that the file has been changed + * and write out the changes * * @param filename {string} name of the HTML file to transform */ @@ -204,6 +200,9 @@ const transformHtml = (filename: string) => { /** Main method (entry point) */ (async () => { + if (verifyOnly) { + console.log('Verifying that all files are in sync with the source files'); + } const sourceDirGlob = join('.', SOURCE_DOCS_DIR, '**'); const includeFilesStartingWithDot = true; From d5fc319d4ece8a0ea981f23da04da498e737c489 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 20 Sep 2022 22:42:05 +0530 Subject: [PATCH 3/5] Remove `docs:build` from postbuild. --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d62053bff..3f80531b7 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,8 @@ "build:new": "concurrently \"yarn build:code\" \"yarn build:types\"", "build": "yarn clean; yarn build:webpack", "docs:build": "ts-node-esm src/docs.mts", - "docs:verify": "ts-node-esm src/docs.mts --verify", - "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md && yarn docs:build", + "docs:verify": "yarn docs:build --verify", + "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md", "release": "yarn build", "lint": "eslint --cache --ignore-path .gitignore . && prettier --check .", "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .", From 8f009ed8156edc6727bf9f9a21caa8bd3aa6e5b5 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 20 Sep 2022 22:50:39 +0530 Subject: [PATCH 4/5] Hope this fails --- docs/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 20f7afe3a..e4d84889a 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -42,7 +42,7 @@ It is also possible to override site-wide theme settings locally, for a specific **Following is an example:** -```mmd +```mermaid %%{init: {'theme':'base'}}%% graph TD a --> b From b9cb7e9898961dfc0135c7c9b5246f1492c45e64 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 20 Sep 2022 23:01:05 +0530 Subject: [PATCH 5/5] fix(docs): `mmd` detection --- docs/8.6.0_docs.md | 14 +++- docs/CHANGELOG.md | 26 +++++- docs/README.md | 84 +++++++++++++++++-- docs/classDiagram.md | 39 ++++++++- .../flowchart.md | 18 +++- docs/entityRelationshipDiagram.md | 8 +- docs/flowchart.md | 18 +++- docs/gantt.md | 16 +++- docs/sequenceDiagram.md | 24 +++++- docs/stateDiagram.md | 13 ++- docs/theming.md | 28 ++++++- src/docs.mts | 7 +- 12 files changed, 270 insertions(+), 25 deletions(-) diff --git a/docs/8.6.0_docs.md b/docs/8.6.0_docs.md index 9cced28ca..6c7b7f50c 100644 --- a/docs/8.6.0_docs.md +++ b/docs/8.6.0_docs.md @@ -77,7 +77,19 @@ When deployed within code, init is called before the graph/diagram description. **for example**: -```mmd +```mermaid-example +%%{init: {"theme": "default", "logLevel": 1 }}%% + graph LR + a-->b + b-->c + c-->d + d-->e + e-->f + f-->g + g--> +``` + +```mermaid %%{init: {"theme": "default", "logLevel": 1 }}%% graph LR a-->b diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index e4d84889a..06d04847c 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -42,6 +42,12 @@ It is also possible to override site-wide theme settings locally, for a specific **Following is an example:** +```mermaid-example +%%{init: {'theme':'base'}}%% + graph TD + a --> b +``` + ```mermaid %%{init: {'theme':'base'}}%% graph TD @@ -58,7 +64,25 @@ The easiest way to make a custom theme is to start with the base theme, and just Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`. -```mmd +```mermaid-example +%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% + 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': '#ff0000'}}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) diff --git a/docs/README.md b/docs/README.md index e22276488..87d78b6c1 100644 --- a/docs/README.md +++ b/docs/README.md @@ -49,7 +49,15 @@ In our release process we rely heavily on visual regression tests using [applito ### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax) -```mmd +```mermaid-example +graph TD; + A-->B; + A-->C; + B-->D; + C-->D; +``` + +```mermaid graph TD; A-->B; A-->C; @@ -61,7 +69,21 @@ graph TD; ### [Sequence diagram](./sequenceDiagram.md) -```mmd +```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 @@ -79,7 +101,20 @@ sequenceDiagram ### [Gantt diagram](./gantt.md) -```mmd +```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 @@ -96,7 +131,24 @@ Future task2 : des4, after des3, 5d ### [Class diagram](./classDiagram.md) -```mmd +```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 @@ -145,7 +197,15 @@ Class08 <--> C2: Cool label ### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md) -```mmd +```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 @@ -157,7 +217,19 @@ erDiagram ### [User Journey Diagram](./user-journey.md) -```mmd +```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 diff --git a/docs/classDiagram.md b/docs/classDiagram.md index 3f12dddf8..a273e1262 100644 --- a/docs/classDiagram.md +++ b/docs/classDiagram.md @@ -336,7 +336,12 @@ classE o-- classF : aggregation Relations can logically represent an N:M association: -```mmd +```mermaid-example +classDiagram + Animal <|--|> Zebra +``` + +```mermaid classDiagram Animal <|--|> Zebra ``` @@ -468,7 +473,17 @@ class Color{ Comments can be entered within a class 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 until the next newline will be treated as a comment, including any class diagram syntax. -```mmd +```mermaid-example +classDiagram +%% This whole line is a comment classDiagram class Shape <> +class Shape{ + <> + noOfVertices + draw() +} +``` + +```mermaid classDiagram %% This whole line is a comment classDiagram class Shape <> class Shape{ @@ -538,7 +553,15 @@ You would define these actions on a separate line after all classes have been de _URL Link:_ -```mmd +```mermaid-example +classDiagram +class Shape +link Shape "https://www.github.com" "This is a tooltip for a link" +class Shape2 +click Shape2 href "https://www.github.com" "This is a tooltip for a link" +``` + +```mermaid classDiagram class Shape link Shape "https://www.github.com" "This is a tooltip for a link" @@ -548,7 +571,15 @@ click Shape2 href "https://www.github.com" "This is a tooltip for a link" _Callback:_ -```mmd +```mermaid-example +classDiagram +class Shape +callback Shape "callbackFunction" "This is a tooltip for a callback" +class Shape2 +click Shape2 call callbackFunction() "This is a tooltip for a callback" +``` + +```mermaid classDiagram class Shape callback Shape "callbackFunction" "This is a tooltip for a callback" diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md index 0f798d27f..b901867d1 100644 --- a/docs/diagrams-and-syntax-and-examples/flowchart.md +++ b/docs/diagrams-and-syntax-and-examples/flowchart.md @@ -397,7 +397,15 @@ graph TB If you describe the same diagram using the the basic syntax, it will take four lines: -```mmd +```mermaid-example +graph TB + A --> C + A --> D + B --> C + B --> D +``` + +```mermaid graph TB A --> C A --> D @@ -740,7 +748,13 @@ Beginner's tip—here's a full example of using interactive links in HTML: Comments can be entered within a flow 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 until the next newline will be treated as a comment, including all punctuation and any flow syntax. -```mmd +```mermaid-example +graph LR +%% this is a comment A -- text --> B{node} + A -- text --> B -- text2 --> C +``` + +```mermaid graph LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C diff --git a/docs/entityRelationshipDiagram.md b/docs/entityRelationshipDiagram.md index 1f24796b6..f6a3bb143 100644 --- a/docs/entityRelationshipDiagram.md +++ b/docs/entityRelationshipDiagram.md @@ -114,7 +114,13 @@ Cardinality is a property that describes how many elements of another entity can Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line: -```mmd +```mermaid-example +erDiagram + CAR ||--o{ NAMED-DRIVER : allows + PERSON ||--o{ NAMED-DRIVER : is +``` + +```mermaid erDiagram CAR ||--o{ NAMED-DRIVER : allows PERSON ||--o{ NAMED-DRIVER : is diff --git a/docs/flowchart.md b/docs/flowchart.md index 3ff17ad02..dedb42a27 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -403,7 +403,15 @@ word of warning, one could go overboard with this making the flowchart harder to markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little. This goes for expressive syntaxes as well. -```mmd +```mermaid-example +flowchart TB + A --> C + A --> D + B --> C + B --> D +``` + +```mermaid flowchart TB A --> C A --> D @@ -778,7 +786,13 @@ Beginner's tip—a full example using interactive links in a html context: Comments can be entered within a flow 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 flow syntax -```mmd +```mermaid-example +flowchart LR +%% this is a comment A -- text --> B{node} + A -- text --> B -- text2 --> C +``` + +```mermaid flowchart LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C diff --git a/docs/gantt.md b/docs/gantt.md index 9d598d977..6776f01c2 100644 --- a/docs/gantt.md +++ b/docs/gantt.md @@ -234,7 +234,21 @@ More info in: https://github.com/mbostock/d3/wiki/Time-Formatting Comments can be entered within a gantt chart, 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 -```mmd +```mermaid-example +gantt + title A Gantt Diagram + %% this is a comment + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d + +``` + +```mermaid gantt title A Gantt Diagram %% this is a comment diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md index 97968a676..1d425243a 100644 --- a/docs/sequenceDiagram.md +++ b/docs/sequenceDiagram.md @@ -481,7 +481,14 @@ 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 -```mmd +```mermaid-example +sequenceDiagram + Alice->>John: Hello John, how are you? + %% this is a comment + John-->>Alice: Great! +``` + +```mermaid sequenceDiagram Alice->>John: Hello John, how are you? %% this is a comment @@ -554,7 +561,20 @@ This can be configured by adding one or more link lines with the format: link : @ -```mmd +```mermaid-example +sequenceDiagram + participant Alice + participant John + link Alice: Dashboard @ https://dashboard.contoso.com/alice + link Alice: Wiki @ https://wiki.contoso.com/alice + link John: Dashboard @ https://dashboard.contoso.com/john + link John: Wiki @ https://wiki.contoso.com/john + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +```mermaid sequenceDiagram participant Alice participant John diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md index 8ea9fd239..3d0c07c8a 100644 --- a/docs/stateDiagram.md +++ b/docs/stateDiagram.md @@ -403,7 +403,18 @@ stateDiagram Comments can be entered within a state diagram chart, 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 -```mmd +```mermaid-example +stateDiagram-v2 + [*] --> Still + Still --> [*] +%% this is a comment + Still --> Moving + Moving --> Still %% another comment + Moving --> Crash + Crash --> [*] +``` + +```mermaid stateDiagram-v2 [*] --> Still Still --> [*] diff --git a/docs/theming.md b/docs/theming.md index 9ba136ec4..3e19b67ed 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -41,7 +41,13 @@ mermaidAPI.initialize({ When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array. -```mmd +```mermaid-example +%%{init: {'theme':'base'}}%% + graph TD + a --> b +``` + +```mermaid %%{init: {'theme':'base'}}%% graph TD a --> b @@ -329,7 +335,25 @@ In the following examples, the directive `init` is used, with the `theme` being ### Flowchart -```mmd +```mermaid-example +%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% + 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: {'securityLevel': 'loose', 'theme':'base'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) diff --git a/src/docs.mts b/src/docs.mts index 15a36ddd3..04424b950 100644 --- a/src/docs.mts +++ b/src/docs.mts @@ -105,7 +105,7 @@ const logWasOrShouldBeTransformed = (filename: string, wasCopied: boolean) => { * * @param {string} filename Name of the file that will be verified * @param {boolean} [doCopy=false] Whether we should copy that transformedContents to the final - * documentation directory. Default is `false`. Default is `false` + * documentation directory. Default is `false` * @param {string} [transformedContent] New contents for the file */ const copyTransformedContents = (filename: string, doCopy = false, transformedContent?: string) => { @@ -145,12 +145,15 @@ const transformMarkdown = (file: string) => { const doc = readSyncedUTF8file(file); const ast: Root = remark.parse(doc); const out = flatmap(ast, (c: Code) => { - if (c.type !== 'code' || !c.lang?.startsWith('mermaid')) { + if (c.type !== 'code') { return [c]; } if (c.lang === 'mermaid' || c.lang === 'mmd') { c.lang = 'mermaid-example'; } + if (c.lang !== 'mermaid-example') { + return [c]; + } return [c, Object.assign({}, c, { lang: 'mermaid' })]; });