diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 0f4d62cb8..d9a79dae6 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -598,90 +598,108 @@ gantt 5 : 0, 5 ``` -### Timeline (with comments, CSS, config in frontmatter, directives) +### Timeline (with comments, CSS, config in frontmatter) ```mermaid-example --- - # triple line MUST be first to start frontmatter. Then, any consistent indent - # yaml style comment - displayMode: compact + # 'Triple dash' MUST be first to start mermaid frontmatter. + # YAML requires consistent indenting + # 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: + # yaml style comment # theme: forest # 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: useWidth: 400 - + rightPadding: 0 + topAxis: true #false + numberSectionStyles: 2 --- -%%{ - init: { - 'Comment': 'Not official, but common JSON style comment', - 'Comment': 'Depreciated 2023 for frontmatter, easier to format, overrides frontmatter', - '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;}', - 'gantt':{ - 'usedWidth': 400, 'rightPadding': 0 - } - } -}%% +%% nb: As of 2025, using directives "%%{" here for 'init' not longer supported - use frontmatter (triple-dash) instead. + +%% Comment for Mermaid (double percent + at least a space) +%% 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 gantt - title Sampler + title Timeline - Gantt Sampler dateFormat YYYY axisFormat %y - %% comment - this next line doesn't recognise year - tickInterval 4year - + %% this next line doesn't recognise 'decade' or 'year', but will silently ignore + tickInterval 1decade section Issue19062 71 : item71, 1900, 1930 section Issue19401 - 36 : item36, 1913, 1935 %% themeCSS targets #item36 as id directly + 36 : item36, 1913, 1935 section Issue1300 94 : item94, 1910, 1915 5 : item5, 1920, 1925 0 : milestone, item0, 1918, 1s - 9 : vert, 1906, 1s %% not yet official - 64 : workaround, 1923, 1s %% custom CSS object in themeCSS https://github.com/mermaid-js/mermaid/issues/3250 + 9 : vert, 1906, 1s %% not yet official + 64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250 ``` ```mermaid --- - # triple line MUST be first to start frontmatter. Then, any consistent indent - # yaml style comment - displayMode: compact + # 'Triple dash' MUST be first to start mermaid frontmatter. + # YAML requires consistent indenting + # 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: + # yaml style comment # theme: forest # 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: useWidth: 400 - + rightPadding: 0 + topAxis: true #false + numberSectionStyles: 2 --- -%%{ - init: { - 'Comment': 'Not official, but common JSON style comment', - 'Comment': 'Depreciated 2023 for frontmatter, easier to format, overrides frontmatter', - '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;}', - 'gantt':{ - 'usedWidth': 400, 'rightPadding': 0 - } - } -}%% +%% nb: As of 2025, using directives "%%{" here for 'init' not longer supported - use frontmatter (triple-dash) instead. + +%% Comment for Mermaid (double percent + at least a space) +%% 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 gantt - title Sampler + title Timeline - Gantt Sampler dateFormat YYYY axisFormat %y - %% comment - this next line doesn't recognise year - tickInterval 4year - + %% this next line doesn't recognise 'decade' or 'year', but will silently ignore + tickInterval 1decade section Issue19062 71 : item71, 1900, 1930 section Issue19401 - 36 : item36, 1913, 1935 %% themeCSS targets #item36 as id directly + 36 : item36, 1913, 1935 section Issue1300 94 : item94, 1910, 1915 5 : item5, 1920, 1925 0 : milestone, item0, 1918, 1s - 9 : vert, 1906, 1s %% not yet official - 64 : workaround, 1923, 1s %% custom CSS object in themeCSS https://github.com/mermaid-js/mermaid/issues/3250 + 9 : vert, 1906, 1s %% not yet official + 64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250 ``` diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index ab5e2d431..45af4e6b2 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -475,7 +475,7 @@ gantt ```mermaid-example --- - # 'Triple dash' MUST be first to start mermaid frontmatter. + # 'Triple dash' MUST be first to start mermaid frontmatter. # YAML requires consistent indenting # 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 @@ -489,16 +489,16 @@ gantt 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;} + text[id^=workaround] { fill: red; y: 100%; font-size: 15px;} " gantt: useWidth: 400 rightPadding: 0 topAxis: true #false - numberSectionStyles: 2 + numberSectionStyles: 2 --- %% 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. %% 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 - title Timeline - Gantt Sampler - dateFormat YYYY + title Timeline - Gantt Sampler + dateFormat YYYY axisFormat %y %% this next line doesn't recognise 'decade' or 'year', but will silently ignore tickInterval 1decade - + section Issue19062 71 : item71, 1900, 1930 section Issue19401