diff --git a/docs/config/accessibility.md b/docs/config/accessibility.md index e5b96670e..bf8b3e591 100644 --- a/docs/config/accessibility.md +++ b/docs/config/accessibility.md @@ -80,9 +80,12 @@ A **multiple line accessible description** _does not have a colon (`:`) after th Ex: - accDescr { The official Bob's Burgers corporate processes that are used - for making very, very big decisions. - This is actually a very simple flow: see the big decision and then make the big decision.} +```markdown +accDescr { +This is a multiple line accessible description. +It does not have a colon and is surrounded by curly brackets. +} +``` See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated. diff --git a/docs/config/directives.md b/docs/config/directives.md index 550707080..f011085c3 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -32,7 +32,9 @@ Mermaid basically supports two types of configuration options to be overridden b **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. - Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs +::: info +We plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs soon. +::: ## Declaring directives diff --git a/docs/config/n00b-advanced.md b/docs/config/n00b-advanced.md index 5dd907429..39c20d632 100644 --- a/docs/config/n00b-advanced.md +++ b/docs/config/n00b-advanced.md @@ -10,17 +10,21 @@ A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so: - stuff stuff - - - +```html +... + + + +``` The actual mermaid file could for example look like this: - mermaid content... - ---- +```javascript +mermaid content ... +``` ## mermaid configuration options -... +```markdown +(coming soon) +``` diff --git a/docs/config/usage.md b/docs/config/usage.md index 476806d8f..0e1f4552b 100644 --- a/docs/config/usage.md +++ b/docs/config/usage.md @@ -22,24 +22,21 @@ For the majority of users, Using the [Live Editor](https://mermaid.live/) would We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor. -**Installing and Hosting Mermaid on a Webpage** +### Installing and Hosting Mermaid on a Webpage -**Using the npm package** +**Using the npm package:** - 1. You will need to install node v16, which would have npm. +1. You will need to install `node v16`, which would have npm. - 2. download yarn using npm. +2. Download `yarn` using npm. - 3. enter the following command: - yarn add mermaid +3. Enter the following command: `yarn add mermaid`. - 4. At this point, you can add mermaid as a dev dependency using this command: - yarn add --dev mermaid +4. At this point, you can add mermaid as a dev dependency using this command: `yarn add --dev mermaid`. - 5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions. - as is shown in the example below +5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions as is shown in the example below. -**Hosting mermaid on a web page.** +**Hosting mermaid on a web page:** > Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md) diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index b20b6b776..f54554bd4 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -172,30 +172,35 @@ Final milestone : milestone, m2, 18:14, 2min The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`. - dateFormat YYYY-MM-DD +```markdown +dateFormat YYYY-MM-DD +``` The following formatting options are supported: - Input Example Description: - YYYY 2014 4 digit year - YY 14 2 digit year - Q 1..4 Quarter of year. Sets month to first month in quarter. - M MM 1..12 Month number - MMM MMMM January..Dec Month name in locale set by moment.locale() - D DD 1..31 Day of month - Do 1st..31st Day of month with ordinal - DDD DDDD 1..365 Day of year - X 1410715640.579 Unix timestamp - x 1410715640579 Unix ms timestamp - H HH 0..23 24 hour time - h hh 1..12 12 hour time used with a A. - a A am pm Post or ante meridiem - m mm 0..59 Minutes - s ss 0..59 Seconds - S 0..9 Tenths of a second - SS 0..99 Hundreds of a second - SSS 0..999 Thousandths of a second - Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z +```markdown +Input Example Description: + +YYYY 2014 4 digit year +YY 14 2 digit year +Q 1..4 Quarter of year. Sets month to first month in quarter. +M MM 1..12 Month number +MMM MMMM January..Dec Month name in locale set by moment.locale() +D DD 1..31 Day of month +Do 1st..31st Day of month with ordinal +DDD DDDD 1..365 Day of year +X 1410715640.579 Unix timestamp +x 1410715640579 Unix ms timestamp +H HH 0..23 24 hour time +h hh 1..12 12 hour time used with a A. +a A am pm Post or ante meridiem +m mm 0..59 Minutes +s ss 0..59 Seconds +S 0..9 Tenths of a second +SS 0..99 Hundreds of a second +SSS 0..999 Thousandths of a second +Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z +``` More info in: https://momentjs.com/docs/#/parsing/string-format/ @@ -203,34 +208,38 @@ More info in: https://momentjs.com/docs/#/parsing/string-format/ The default output date format is `YYYY-MM-DD`. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020. - axisFormat %Y-%m-%d +```markdown +axisFormat %Y-%m-%d +``` The following formatting strings are supported: - %a - abbreviated weekday name. - %A - full weekday name. - %b - abbreviated month name. - %B - full month name. - %c - date and time, as "%a %b %e %H:%M:%S %Y". - %d - zero-padded day of the month as a decimal number [01,31]. - %e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d. - %H - hour (24-hour clock) as a decimal number [00,23]. - %I - hour (12-hour clock) as a decimal number [01,12]. - %j - day of the year as a decimal number [001,366]. - %m - month as a decimal number [01,12]. - %M - minute as a decimal number [00,59]. - %L - milliseconds as a decimal number [000, 999]. - %p - either AM or PM. - %S - second as a decimal number [00,61]. - %U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53]. - %w - weekday as a decimal number [0(Sunday),6]. - %W - week number of the year (Monday as the first day of the week) as a decimal number [00,53]. - %x - date, as "%m/%d/%Y". - %X - time, as "%H:%M:%S". - %y - year without century as a decimal number [00,99]. - %Y - year with century as a decimal number. - %Z - time zone offset, such as "-0700". - %% - a literal "%" character. +```markdown +%a - abbreviated weekday name. +%A - full weekday name. +%b - abbreviated month name. +%B - full month name. +%c - date and time, as "%a %b %e %H:%M:%S %Y". +%d - zero-padded day of the month as a decimal number [01,31]. +%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %\_d. +%H - hour (24-hour clock) as a decimal number [00,23]. +%I - hour (12-hour clock) as a decimal number [01,12]. +%j - day of the year as a decimal number [001,366]. +%m - month as a decimal number [01,12]. +%M - minute as a decimal number [00,59]. +%L - milliseconds as a decimal number [000, 999]. +%p - either AM or PM. +%S - second as a decimal number [00,61]. +%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53]. +%w - weekday as a decimal number [0(Sunday),6]. +%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53]. +%x - date, as "%m/%d/%Y". +%X - time, as "%H:%M:%S". +%y - year without century as a decimal number [00,99]. +%Y - year with century as a decimal number. +%Z - time zone offset, such as "-0700". +%% - a literal "%" character. +``` More info in: @@ -238,11 +247,15 @@ More info in: The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`. - tickInterval 1day +```markdown +tickInterval 1day +``` The pattern is: - /^([1-9][0-9]*)(minute|hour|day|week|month)$/ +```markdown +/^([1-9][0-9]\*)(minute|hour|day|week|month)$/ +``` More info in: diff --git a/packages/mermaid/src/docs/config/accessibility.md b/packages/mermaid/src/docs/config/accessibility.md index e7947adec..67fb090b8 100644 --- a/packages/mermaid/src/docs/config/accessibility.md +++ b/packages/mermaid/src/docs/config/accessibility.md @@ -74,10 +74,11 @@ A **multiple line accessible description** _does not have a colon (`:`) after th Ex: -``` -accDescr { The official Bob's Burgers corporate processes that are used - for making very, very big decisions. - This is actually a very simple flow: see the big decision and then make the big decision.} +```markdown +accDescr { +This is a multiple line accessible description. +It does not have a colon and is surrounded by curly brackets. +} ``` See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated. diff --git a/packages/mermaid/src/docs/config/directives.md b/packages/mermaid/src/docs/config/directives.md index bc74ad309..968ea337b 100644 --- a/packages/mermaid/src/docs/config/directives.md +++ b/packages/mermaid/src/docs/config/directives.md @@ -26,9 +26,9 @@ Mermaid basically supports two types of configuration options to be overridden b **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. -``` -Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs -``` +::: info +We plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs soon. +::: ## Declaring directives diff --git a/packages/mermaid/src/docs/config/n00b-advanced.md b/packages/mermaid/src/docs/config/n00b-advanced.md index 1e6546f5c..2932faa48 100644 --- a/packages/mermaid/src/docs/config/n00b-advanced.md +++ b/packages/mermaid/src/docs/config/n00b-advanced.md @@ -4,8 +4,8 @@ A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so: -``` -stuff stuff +```html +... @@ -13,12 +13,12 @@ stuff stuff The actual mermaid file could for example look like this: +```javascript +mermaid content ... ``` -mermaid content... -``` - ---- ## mermaid configuration options -... +```markdown +(coming soon) +``` diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md index 3eac4ad6f..bbfc192c7 100644 --- a/packages/mermaid/src/docs/config/usage.md +++ b/packages/mermaid/src/docs/config/usage.md @@ -16,26 +16,21 @@ For the majority of users, Using the [Live Editor](https://mermaid.live/) would We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor. -**Installing and Hosting Mermaid on a Webpage** +### Installing and Hosting Mermaid on a Webpage -**Using the npm package** +**Using the npm package:** -``` -1. You will need to install node v16, which would have npm. +1. You will need to install `node v16`, which would have npm. -2. download yarn using npm. +2. Download `yarn` using npm. -3. enter the following command: - yarn add mermaid +3. Enter the following command: `yarn add mermaid`. -4. At this point, you can add mermaid as a dev dependency using this command: - yarn add --dev mermaid +4. At this point, you can add mermaid as a dev dependency using this command: `yarn add --dev mermaid`. -5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions. - as is shown in the example below -``` +5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions as is shown in the example below. -**Hosting mermaid on a web page.** +**Hosting mermaid on a web page:** > Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md) diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index c9301bfee..7ddb72734 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -104,33 +104,34 @@ Final milestone : milestone, m2, 18:14, 2min The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`. -``` +```markdown dateFormat YYYY-MM-DD ``` The following formatting options are supported: -``` -Input Example Description: -YYYY 2014 4 digit year -YY 14 2 digit year -Q 1..4 Quarter of year. Sets month to first month in quarter. -M MM 1..12 Month number -MMM MMMM January..Dec Month name in locale set by moment.locale() -D DD 1..31 Day of month -Do 1st..31st Day of month with ordinal -DDD DDDD 1..365 Day of year -X 1410715640.579 Unix timestamp -x 1410715640579 Unix ms timestamp -H HH 0..23 24 hour time -h hh 1..12 12 hour time used with a A. -a A am pm Post or ante meridiem -m mm 0..59 Minutes -s ss 0..59 Seconds -S 0..9 Tenths of a second -SS 0..99 Hundreds of a second -SSS 0..999 Thousandths of a second -Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z +```markdown +Input Example Description: + +YYYY 2014 4 digit year +YY 14 2 digit year +Q 1..4 Quarter of year. Sets month to first month in quarter. +M MM 1..12 Month number +MMM MMMM January..Dec Month name in locale set by moment.locale() +D DD 1..31 Day of month +Do 1st..31st Day of month with ordinal +DDD DDDD 1..365 Day of year +X 1410715640.579 Unix timestamp +x 1410715640579 Unix ms timestamp +H HH 0..23 24 hour time +h hh 1..12 12 hour time used with a A. +a A am pm Post or ante meridiem +m mm 0..59 Minutes +s ss 0..59 Seconds +S 0..9 Tenths of a second +SS 0..99 Hundreds of a second +SSS 0..999 Thousandths of a second +Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z ``` More info in: https://momentjs.com/docs/#/parsing/string-format/ @@ -139,20 +140,20 @@ More info in: https://momentjs.com/docs/#/parsing/string-format/ The default output date format is `YYYY-MM-DD`. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020. -``` -axisFormat %Y-%m-%d +```markdown +axisFormat %Y-%m-%d ``` The following formatting strings are supported: -``` +```markdown %a - abbreviated weekday name. %A - full weekday name. %b - abbreviated month name. %B - full month name. %c - date and time, as "%a %b %e %H:%M:%S %Y". %d - zero-padded day of the month as a decimal number [01,31]. -%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d. +%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %\_d. %H - hour (24-hour clock) as a decimal number [00,23]. %I - hour (12-hour clock) as a decimal number [01,12]. %j - day of the year as a decimal number [001,366]. @@ -178,14 +179,14 @@ More info in: [https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format](h The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`. -``` +```markdown tickInterval 1day ``` The pattern is: -``` -/^([1-9][0-9]*)(minute|hour|day|week|month)$/ +```markdown +/^([1-9][0-9]\*)(minute|hour|day|week|month)$/ ``` More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every)