marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

[autofix.ci] apply automated fixes

Browse Source
This commit is contained in:
autofix-ci[bot]
2025-04-18 03:52:33 +00:00
committed by GitHub
parent 054f5444d6
commit 79b47be35f
2 changed files with 68 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
docs/syntax/gantt.md
View File

@@ -598,90 +598,108 @@ gantt
5 : 0, 5 5 : 0, 5
``` ```
### Timeline (with comments, CSS, config in frontmatter, directives) ### Timeline (with comments, CSS, config in frontmatter)
```mermaid-example ```mermaid-example
--- ---
# triple line MUST be first to start frontmatter. Then, any consistent indent # 'Triple dash' MUST be first to start mermaid frontmatter.
# yaml style comment # YAML requires consistent indenting
displayMode: compact # Settings are caseSensitive, silently ignore misspellings; incorrect parameters will break diagram, and inconsistently require strings to be quoted
# Reminder to test diagrams online: https://mermaid.live
# 'init' and chart 'config' settings belong here.
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config: config:
# yaml style comment
# theme: forest # theme: forest
# themeCSS: " #item36 { fill: CadetBlue } " # themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers: \n
// Comment in CSS using slashes \n
#item36 { fill: CadetBlue } \n
// Custom marker workaround CSS from forum (below) \n
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } \n
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt: gantt:
useWidth: 400 useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
--- ---
%%{ %% nb: As of 2025, using directives "%%{" here for 'init' not longer supported - use frontmatter (triple-dash) instead.
init: {
'Comment': 'Not official, but common JSON style comment', %% Comment for Mermaid (double percent + at least a space)
'Comment': 'Depreciated 2023 for frontmatter, easier to format, overrides frontmatter', %% Script is case insensitive. Indents are completely ignored.
'themeCSS': ' #item36 { fill: CadetBlue } rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}', %% misspelling or unknown words will break diagrams, while parameters silently fail. Strings shouldn't be quoted and will auto-detect based on expected parameters
'gantt':{
'usedWidth': 400, 'rightPadding': 0
}
}
}%%
gantt gantt
title Sampler title Timeline - Gantt Sampler
dateFormat YYYY dateFormat YYYY
axisFormat %y axisFormat %y
%% comment - this next line doesn't recognise year %% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 4year tickInterval 1decade
section Issue19062 section Issue19062
71 : item71, 1900, 1930 71 : item71, 1900, 1930
section Issue19401 section Issue19401
36 : item36, 1913, 1935 %% themeCSS targets #item36 as id directly 36 : item36, 1913, 1935
section Issue1300 section Issue1300
94 : item94, 1910, 1915 94 : item94, 1910, 1915
5 : item5, 1920, 1925 5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s 0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official 9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object in themeCSS https://github.com/mermaid-js/mermaid/issues/3250 64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
``` ```
```mermaid ```mermaid
--- ---
# triple line MUST be first to start frontmatter. Then, any consistent indent # 'Triple dash' MUST be first to start mermaid frontmatter.
# yaml style comment # YAML requires consistent indenting
displayMode: compact # Settings are caseSensitive, silently ignore misspellings; incorrect parameters will break diagram, and inconsistently require strings to be quoted
# Reminder to test diagrams online: https://mermaid.live
# 'init' and chart 'config' settings belong here.
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config: config:
# yaml style comment
# theme: forest # theme: forest
# themeCSS: " #item36 { fill: CadetBlue } " # themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers: \n
// Comment in CSS using slashes \n
#item36 { fill: CadetBlue } \n
// Custom marker workaround CSS from forum (below) \n
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } \n
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt: gantt:
useWidth: 400 useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
--- ---
%%{ %% nb: As of 2025, using directives "%%{" here for 'init' not longer supported - use frontmatter (triple-dash) instead.
init: {
'Comment': 'Not official, but common JSON style comment', %% Comment for Mermaid (double percent + at least a space)
'Comment': 'Depreciated 2023 for frontmatter, easier to format, overrides frontmatter', %% Script is case insensitive. Indents are completely ignored.
'themeCSS': ' #item36 { fill: CadetBlue } rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}', %% misspelling or unknown words will break diagrams, while parameters silently fail. Strings shouldn't be quoted and will auto-detect based on expected parameters
'gantt':{
'usedWidth': 400, 'rightPadding': 0
}
}
}%%
gantt gantt
title Sampler title Timeline - Gantt Sampler
dateFormat YYYY dateFormat YYYY
axisFormat %y axisFormat %y
%% comment - this next line doesn't recognise year %% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 4year tickInterval 1decade
section Issue19062 section Issue19062
71 : item71, 1900, 1930 71 : item71, 1900, 1930
section Issue19401 section Issue19401
36 : item36, 1913, 1935 %% themeCSS targets #item36 as id directly 36 : item36, 1913, 1935
section Issue1300 section Issue1300
94 : item94, 1910, 1915 94 : item94, 1910, 1915
5 : item5, 1920, 1925 5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s 0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official 9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object in themeCSS https://github.com/mermaid-js/mermaid/issues/3250 64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
``` ```
<!--- cspell:ignore isadded ---> <!--- cspell:ignore isadded --->

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

@@ -475,7 +475,7 @@ gantt
```mermaid-example ```mermaid-example
--- ---
# 'Triple dash' MUST be first to start mermaid frontmatter. # 'Triple dash' MUST be first to start mermaid frontmatter.
# YAML requires consistent indenting # YAML requires consistent indenting
# Settings are caseSensitive, silently ignore misspellings; incorrect parameters will break diagram, and inconsistently require strings to be quoted # Settings are caseSensitive, silently ignore misspellings; incorrect parameters will break diagram, and inconsistently require strings to be quoted
# Reminder to test diagrams online: https://mermaid.live # Reminder to test diagrams online: https://mermaid.live
@@ -489,16 +489,16 @@ gantt
themeCSS: " // YAML supports multiline strings using a newline markers: \n themeCSS: " // YAML supports multiline strings using a newline markers: \n
// Comment in CSS using slashes \n // Comment in CSS using slashes \n
#item36 { fill: CadetBlue } \n #item36 { fill: CadetBlue } \n
// Custom marker workaround CSS from forum (below) \n // Custom marker workaround CSS from forum (below) \n
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } \n rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } \n
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;} text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
" "
gantt: gantt:
useWidth: 400 useWidth: 400
rightPadding: 0 rightPadding: 0
topAxis: true #false topAxis: true #false
numberSectionStyles: 2 numberSectionStyles: 2
--- ---
%% nb: As of 2025, using directives "%%{" here for 'init' not longer supported - use frontmatter (triple-dash) instead. %% nb: As of 2025, using directives "%%{" here for 'init' not longer supported - use frontmatter (triple-dash) instead.
@@ -506,12 +506,12 @@ gantt
%% Script is case insensitive. Indents are completely ignored. %% Script is case insensitive. Indents are completely ignored.
%% misspelling or unknown words will break diagrams, while parameters silently fail. Strings shouldn't be quoted and will auto-detect based on expected parameters %% misspelling or unknown words will break diagrams, while parameters silently fail. Strings shouldn't be quoted and will auto-detect based on expected parameters
gantt gantt
title Timeline - Gantt Sampler title Timeline - Gantt Sampler
dateFormat YYYY dateFormat YYYY
axisFormat %y axisFormat %y
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore %% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 1decade tickInterval 1decade
section Issue19062 section Issue19062
71 : item71, 1900, 1930 71 : item71, 1900, 1930
section Issue19401 section Issue19401