marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-03 07:36:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3907 from huynhicode/docs/formatting

Browse Source 
docs: fix text overflow
This commit is contained in:
Sidharth Vinod
2022-12-24 00:30:31 +05:30
committed by GitHub
parent c23cd49322 dbfb29de27
commit 8ed1ad5a8e
11 changed files with 180 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/config/accessibility.md
View File

@@ -80,9 +80,12 @@ A **multiple line accessible description** _does not have a colon (`:`) after th
Ex: Ex:
accDescr { The official Bob's Burgers corporate processes that are used ```markdown
for making very, very big decisions. accDescr {
This is actually a very simple flow: see the big decision and then make the big decision.} 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. 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.

3
docs/config/directives.md
View File

@@ -32,7 +32,8 @@ 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. **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 > **Note**
> 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 ## Declaring directives

20
docs/config/n00b-advanced.md
View File

@@ -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: 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
</div> ...
</body> </div>
</html> </body>
</html>
```
The actual mermaid file could for example look like this: The actual mermaid file could for example look like this:
mermaid content... ```javascript
mermaid content ...
--- ```
## mermaid configuration options ## mermaid configuration options
... ```markdown
(coming soon)
```

19
docs/config/usage.md
View File

@@ -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. 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: 3. Enter the following command: `yarn add mermaid`.
yarn add mermaid
4. At this point, you can add mermaid as a dev dependency using this command: 4. At this point, you can add mermaid as a dev dependency using this command: `yarn add --dev mermaid`.
yarn add --dev mermaid
5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions. 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.
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) > Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md)

107
docs/syntax/gantt.md
View File

@@ -172,30 +172,33 @@ Final milestone : milestone, m2, 18:14, 2min
The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`. 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: The following formatting options are supported:
Input Example Description: | Input | Example | Description |
YYYY 2014 4 digit year | ---------- | -------------- | ------------------------------------------------------ |
YY 14 2 digit year | `YYYY` | 2014 | 4 digit year |
Q 1..4 Quarter of year. Sets month to first month in quarter. | `YY` | 14 | 2 digit year |
M MM 1..12 Month number | `Q` | 1..4 | Quarter of year. Sets month to first month in quarter. |
MMM MMMM January..Dec Month name in locale set by moment.locale() | `M MM` | 1..12 | Month number |
D DD 1..31 Day of month | `MMM MMMM` | January..Dec | Month name in locale set by `moment.locale()` |
Do 1st..31st Day of month with ordinal | `D DD` | 1..31 | Day of month |
DDD DDDD 1..365 Day of year | `Do` | 1st..31st | Day of month with ordinal |
X 1410715640.579 Unix timestamp | `DDD DDDD` | 1..365 | Day of year |
x 1410715640579 Unix ms timestamp | `X` | 1410715640.579 | Unix timestamp |
H HH 0..23 24 hour time | `x` | 1410715640579 | Unix ms timestamp |
h hh 1..12 12 hour time used with a A. | `H HH` | 0..23 | 24 hour time |
a A am pm Post or ante meridiem | `h hh` | 1..12 | 12 hour time used with `a A`. |
m mm 0..59 Minutes | `a A` | am pm | Post or ante meridiem |
s ss 0..59 Seconds | `m mm` | 0..59 | Minutes |
S 0..9 Tenths of a second | `s ss` | 0..59 | Seconds |
SS 0..99 Hundreds of a second | `S` | 0..9 | Tenths of a second |
SSS 0..999 Thousandths of a second | `SS` | 0..99 | Hundreds of a second |
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z | `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/ More info in: https://momentjs.com/docs/#/parsing/string-format/
@@ -203,34 +206,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. 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: The following formatting strings are supported:
%a - abbreviated weekday name. | Format | Definition |
%A - full weekday name. | ------ | ------------------------------------------------------------------------------------------ |
%b - abbreviated month name. | %a | abbreviated weekday name |
%B - full month name. | %A | full weekday name |
%c - date and time, as "%a %b %e %H:%M:%S %Y". | %b | abbreviated month name |
%d - zero-padded day of the month as a decimal number [01,31]. | %B | full month name |
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d. | %c | date and time, as "%a %b %e %H:%M:%S %Y" |
%H - hour (24-hour clock) as a decimal number [00,23]. | %d | zero-padded day of the month as a decimal number \[01,31] |
%I - hour (12-hour clock) as a decimal number [01,12]. | %e | space-padded day of the month as a decimal number \[ 1,31]; equivalent to %\_d |
%j - day of the year as a decimal number [001,366]. | %H | hour (24-hour clock) as a decimal number \[00,23] |
%m - month as a decimal number [01,12]. | %I | hour (12-hour clock) as a decimal number \[01,12] |
%M - minute as a decimal number [00,59]. | %j | day of the year as a decimal number \[001,366] |
%L - milliseconds as a decimal number [000, 999]. | %m | month as a decimal number \[01,12] |
%p - either AM or PM. | %M | minute as a decimal number \[00,59] |
%S - second as a decimal number [00,61]. | %L | milliseconds as a decimal number \[000, 999] |
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53]. | %p | either AM or PM |
%w - weekday as a decimal number [0(Sunday),6]. | %S | second as a decimal number \[00,61] |
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53]. | %U | week number of the year (Sunday as the first day of the week) as a decimal number \[00,53] |
%x - date, as "%m/%d/%Y". | %w | weekday as a decimal number \[0(Sunday),6] |
%X - time, as "%H:%M:%S". | %W | week number of the year (Monday as the first day of the week) as a decimal number \[00,53] |
%y - year without century as a decimal number [00,99]. | %x | date, as "%m/%d/%Y" |
%Y - year with century as a decimal number. | %X | time, as "%H:%M:%S" |
%Z - time zone offset, such as "-0700". | %y | year without century as a decimal number \[00,99] |
%% - a literal "%" character. | %Y | year with century as a decimal number |
| %Z | time zone offset, such as "-0700" |
| %% | a literal "%" character |
More info in: <https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format> More info in: <https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format>
@@ -238,11 +245,15 @@ More info in: <https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format>
The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`. The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.
tickInterval 1day ```markdown
tickInterval 1day
```
The pattern is: The pattern is:
/^([1-9][0-9]*)(minute|hour|day|week|month)$/ ```javascript
/^([1-9][0-9]*)(minute|hour|day|week|month)$/;
```
More info in: <https://github.com/d3/d3-time#interval_every> More info in: <https://github.com/d3/d3-time#interval_every>

23
packages/mermaid/src/docs.mts
View File

@@ -146,9 +146,22 @@ const readSyncedUTF8file = (filename: string): string => {
return readFileSync(filename, 'utf8'); return readFileSync(filename, 'utf8');
}; };
const transformToBlockQuote = (content: string, type: string) => { const blockIcons: Record<string, string> = {
const title = type === 'warning' ? 'Warning' : 'Note'; tip: '💡 ',
return `> **${title}** \n> ${content.replace(/\n/g, '\n> ')}`; danger: '‼️ ',
};
const capitalize = (word: string) => word[0].toUpperCase() + word.slice(1);
const transformToBlockQuote = (content: string, type: string, customTitle?: string | null) => {
if (vitepress) {
const vitepressType = type === 'note' ? 'info' : type;
return `::: ${vitepressType} ${customTitle || ''}\n${content}\n:::`;
} else {
const icon = blockIcons[type] || '';
const title = `${icon}${customTitle || capitalize(type)}`;
return `> **${title}** \n> ${content.replace(/\n/g, '\n> ')}`;
}
}; };
const injectPlaceholders = (text: string): string => const injectPlaceholders = (text: string): string =>
@@ -194,8 +207,8 @@ const transformMarkdown = (file: string) => {
} }
// Transform codeblocks into block quotes. // Transform codeblocks into block quotes.
if (['note', 'tip', 'warning'].includes(c.lang)) { if (['note', 'tip', 'warning', 'danger'].includes(c.lang)) {
return [remark.parse(transformToBlockQuote(c.value, c.lang))]; return [remark.parse(transformToBlockQuote(c.value, c.lang, c.meta))];
} }
return [c]; return [c];

9
packages/mermaid/src/docs/config/accessibility.md
View File

@@ -74,10 +74,11 @@ A **multiple line accessible description** _does not have a colon (`:`) after th
Ex: Ex:
``` ```markdown
accDescr { The official Bob's Burgers corporate processes that are used accDescr {
for making very, very big decisions. This is a multiple line accessible description.
This is actually a very simple flow: see the big decision and then make the big decision.} 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. 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.

4
packages/mermaid/src/docs/config/directives.md
View File

@@ -26,8 +26,8 @@ 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. **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.
``` ```note
Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs 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 ## Declaring directives

14
packages/mermaid/src/docs/config/n00b-advanced.md
View File

@@ -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: A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:
``` ```html
stuff stuff ...
</div> </div>
</body> </body>
</html> </html>
@@ -13,12 +13,12 @@ stuff stuff
The actual mermaid file could for example look like this: The actual mermaid file could for example look like this:
```javascript
mermaid content ...
``` ```
mermaid content...
```
---
## mermaid configuration options ## mermaid configuration options
... ```markdown
(coming soon)
```

21
packages/mermaid/src/docs/config/usage.md
View File

@@ -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. 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: 3. Enter the following command: `yarn add mermaid`.
yarn add mermaid
4. At this point, you can add mermaid as a dev dependency using this command: 4. At this point, you can add mermaid as a dev dependency using this command: `yarn add --dev mermaid`.
yarn add --dev mermaid
5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions. 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.
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) > Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md)

107
packages/mermaid/src/docs/syntax/gantt.md
View File

@@ -104,34 +104,33 @@ Final milestone : milestone, m2, 18:14, 2min
The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`. The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`.
``` ```markdown
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
``` ```
The following formatting options are supported: The following formatting options are supported:
``` | Input | Example | Description |
Input Example Description: | ---------- | -------------- | ------------------------------------------------------ |
YYYY 2014 4 digit year | `YYYY` | 2014 | 4 digit year |
YY 14 2 digit year | `YY` | 14 | 2 digit year |
Q 1..4 Quarter of year. Sets month to first month in quarter. | `Q` | 1..4 | Quarter of year. Sets month to first month in quarter. |
M MM 1..12 Month number | `M MM` | 1..12 | Month number |
MMM MMMM January..Dec Month name in locale set by moment.locale() | `MMM MMMM` | January..Dec | Month name in locale set by `moment.locale()` |
D DD 1..31 Day of month | `D DD` | 1..31 | Day of month |
Do 1st..31st Day of month with ordinal | `Do` | 1st..31st | Day of month with ordinal |
DDD DDDD 1..365 Day of year | `DDD DDDD` | 1..365 | Day of year |
X 1410715640.579 Unix timestamp | `X` | 1410715640.579 | Unix timestamp |
x 1410715640579 Unix ms timestamp | `x` | 1410715640579 | Unix ms timestamp |
H HH 0..23 24 hour time | `H HH` | 0..23 | 24 hour time |
h hh 1..12 12 hour time used with a A. | `h hh` | 1..12 | 12 hour time used with `a A`. |
a A am pm Post or ante meridiem | `a A` | am pm | Post or ante meridiem |
m mm 0..59 Minutes | `m mm` | 0..59 | Minutes |
s ss 0..59 Seconds | `s ss` | 0..59 | Seconds |
S 0..9 Tenths of a second | `S` | 0..9 | Tenths of a second |
SS 0..99 Hundreds of a second | `SS` | 0..99 | Hundreds of a second |
SSS 0..999 Thousandths of a second | `SSS` | 0..999 | Thousandths of a second |
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z | `Z ZZ` | +12:00 | Offset from UTC as +-HH:mm, +-HHmm, or Z |
```
More info in: https://momentjs.com/docs/#/parsing/string-format/ More info in: https://momentjs.com/docs/#/parsing/string-format/
@@ -139,38 +138,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. 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.
``` ```markdown
axisFormat %Y-%m-%d axisFormat %Y-%m-%d
``` ```
The following formatting strings are supported: The following formatting strings are supported:
``` | Format | Definition |
%a - abbreviated weekday name. | ------ | ----------------------------------------------------------------------------------------- |
%A - full weekday name. | %a | abbreviated weekday name |
%b - abbreviated month name. | %A | full weekday name |
%B - full month name. | %b | abbreviated month name |
%c - date and time, as "%a %b %e %H:%M:%S %Y". | %B | full month name |
%d - zero-padded day of the month as a decimal number [01,31]. | %c | date and time, as "%a %b %e %H:%M:%S %Y" |
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d. | %d | zero-padded day of the month as a decimal number [01,31] |
%H - hour (24-hour clock) as a decimal number [00,23]. | %e | space-padded day of the month as a decimal number [ 1,31]; equivalent to %\_d |
%I - hour (12-hour clock) as a decimal number [01,12]. | %H | hour (24-hour clock) as a decimal number [00,23] |
%j - day of the year as a decimal number [001,366]. | %I | hour (12-hour clock) as a decimal number [01,12] |
%m - month as a decimal number [01,12]. | %j | day of the year as a decimal number [001,366] |
%M - minute as a decimal number [00,59]. | %m | month as a decimal number [01,12] |
%L - milliseconds as a decimal number [000, 999]. | %M | minute as a decimal number [00,59] |
%p - either AM or PM. | %L | milliseconds as a decimal number [000, 999] |
%S - second as a decimal number [00,61]. | %p | either AM or PM |
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53]. | %S | second as a decimal number [00,61] |
%w - weekday as a decimal number [0(Sunday),6]. | %U | week number of the year (Sunday as the first day of the week) as a decimal number [00,53] |
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53]. | %w | weekday as a decimal number [0(Sunday),6] |
%x - date, as "%m/%d/%Y". | %W | week number of the year (Monday as the first day of the week) as a decimal number [00,53] |
%X - time, as "%H:%M:%S". | %x | date, as "%m/%d/%Y" |
%y - year without century as a decimal number [00,99]. | %X | time, as "%H:%M:%S" |
%Y - year with century as a decimal number. | %y | year without century as a decimal number [00,99] |
%Z - time zone offset, such as "-0700". | %Y | year with century as a decimal number |
%% - a literal "%" character. | %Z | time zone offset, such as "-0700" |
``` | %% | a literal "%" character |
More info in: [https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format](https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format) More info in: [https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format](https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format)
@@ -178,14 +177,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`. The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.
``` ```markdown
tickInterval 1day tickInterval 1day
``` ```
The pattern is: The pattern is:
``` ```javascript
/^([1-9][0-9]*)(minute|hour|day|week|month)$/ /^([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) More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every)