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

shift directives to frontmatter

Browse Source 
* shifting directives to frontmatter as recomended - it is literally about to me removed, 
* tweaking context comment about directives
* tweaking code in general formatting, spelling, wording
This commit is contained in:
generrosity
2025-04-18 15:37:50 +12:00
committed by GitHub
parent fbdbd9d0dd
commit beb80db25a
1 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -471,48 +471,57 @@ 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 mispellings; incorrect parameters will break diagram, and inconsistantly 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.
%% Mispelling 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
```
<!--- cspell:ignore isadded --->