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

Merge branch 'develop' into pr/emersonbottero/3678

Browse Source 
* develop:
  chore(docs): Update live editor links
  update user story link
  feat(gantt): Add option 'tickInterval' for custom tick interval
  Convert attr to classed
  Convert attr to style
This commit is contained in:
Sidharth Vinod
2022-11-01 21:01:58 +05:30
parent 4699ba3e71 7c07bc02af
commit 86f835cfc8
11 changed files with 300 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
README.zh-CN.md
View File

@@ -39,7 +39,7 @@ Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://merma
<table> <table>
<!-- <Flowchart> --> <!-- <Flowchart> -->
### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>] ### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
``` ```
flowchart LR flowchart LR
@@ -57,7 +57,7 @@ C -->|One| D[Result 1]
C -->|Two| E[Result 2] C -->|Two| E[Result 2]
``` ```
### 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>] ### 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
``` ```
sequenceDiagram sequenceDiagram
@@ -83,7 +83,7 @@ John->>Bob: How about you?
Bob-->>John: Jolly good! Bob-->>John: Jolly good!
``` ```
### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>] ### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
``` ```
gantt gantt
@@ -107,7 +107,7 @@ gantt
Parallel 4 : des6, after des4, 1d Parallel 4 : des6, after des4, 1d
``` ```
### 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>] ### 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
``` ```
classDiagram classDiagram
@@ -147,7 +147,7 @@ class Class10 {
} }
``` ```
### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>] ### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkLsOwjAMRX-l8ojahTEDCzB26kgYrMYtkfJAqVMJVf13QiIKqqfr44d8vUDvFYGAiZHponEMaJv5KF2V4na4V01zqjrWxhSUZYapuEetn7UbCy16P_5HzwGnR6FZfpdCDZaCRa3SWcunQQI_yJIEkaSiAaNhCdKtqRUj--7lehAcItUQn-pnBMSAZtroVWn2YYOU07b4z29Y37gJVYk">live editor</a>]
``` ```
stateDiagram-v2 stateDiagram-v2
@@ -169,7 +169,7 @@ Moving --> Crash
Crash --> [*] Crash --> [*]
``` ```
### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>] ### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
``` ```
pie pie
@@ -185,9 +185,9 @@ pie
"Rats" : 15 "Rats" : 15
``` ```
### Git 图 [实验特性 - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>] ### Git 图 [实验特性 - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>] ### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaid.live/edit#pako:eNpljzEPgkAMhf9K05nFGJdbJXFiYmVpuKIncDVHL4QQ_ruHaILaqXnf63vpjLVYRoMAd4nB81R5SKNOO4ZiglFC6_wVLL3JwLU68XARUHnhTQcoqGVQJgMnAwV_5GSMj0HJhcHAcU_y7d7AYVUzOJP-ddyk3ydZGf0n66uldPqCPxWYYc-hJ2fTj_OqVqg3Tplo0mq5odhphZVfkpWiSjn5Go2GyBnGhyXl3NE1UI-moW7g5QkSoF5m">live editor</a>]
``` ```
journey journey

126
cypress/integration/rendering/gantt.spec.js
View File

@@ -341,4 +341,130 @@ describe('Gantt diagram', () => {
expect(descriptionEl.textContent).to.equal(expectedAccDescription); expect(descriptionEl.textContent).to.equal(expectedAccDescription);
}); });
}); });
it('should render a gantt diagram with tick is 15 minutes', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %H:%M
tickInterval 15minute
excludes weekends
section Section
A task : a1, 2022-10-03, 6h
Another task : after a1, 6h
section Another
Task in sec : 2022-10-03, 3h
another task : 3h
`,
{}
);
});
it('should render a gantt diagram with tick is 6 hours', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %d %H:%M
tickInterval 6hour
excludes weekends
section Section
A task : a1, 2022-10-03, 1d
Another task : after a1, 2d
section Another
Task in sec : 2022-10-04, 2d
another task : 2d
`,
{}
);
});
it('should render a gantt diagram with tick is 1 day', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %m-%d
tickInterval 1day
excludes weekends
section Section
A task : a1, 2022-10-01, 30d
Another task : after a1, 20d
section Another
Task in sec : 2022-10-20, 12d
another task : 24d
`,
{}
);
});
it('should render a gantt diagram with tick is 1 week', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %m-%d
tickInterval 1week
excludes weekends
section Section
A task : a1, 2022-10-01, 30d
Another task : after a1, 20d
section Another
Task in sec : 2022-10-20, 12d
another task : 24d
`,
{}
);
});
it('should render a gantt diagram with tick is 1 month', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %m-%d
tickInterval 1month
excludes weekends
section Section
A task : a1, 2022-10-01, 30d
Another task : after a1, 20d
section Another
Task in sec : 2022-10-20, 12d
another task : 24d
`,
{}
);
});
it('should render a gantt diagram with tick is 1 day and topAxis is true', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %m-%d
tickInterval 1day
excludes weekends
section Section
A task : a1, 2022-10-01, 30d
Another task : after a1, 20d
section Another
Task in sec : 2022-10-20, 12d
another task : 24d
`,
{ gantt: { topAxis: true } }
);
});
}); });

2
docs/config/setup/modules/defaultConfig.md
View File

@@ -14,7 +14,7 @@
#### Defined in #### Defined in
[defaultConfig.ts:1869](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1869) [defaultConfig.ts:1882](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1882)
--- ---

12
docs/syntax/gantt.md
View File

@@ -234,6 +234,18 @@ The following formatting strings are supported:
More info in: https://github.com/mbostock/d3/wiki/Time-Formatting More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
### Axis ticks
The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.
tickInterval 1day
The pattern is:
/^([1-9][0-9]*)(minute|hour|day|week|month)$/
More info in: <https://github.com/d3/d3-time#interval_every>
## Comments ## Comments
Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax

1
packages/mermaid/src/config.type.ts
View File

@@ -297,6 +297,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
sectionFontSize?: string | number; sectionFontSize?: string | number;
numberSectionStyles?: number; numberSectionStyles?: number;
axisFormat?: string; axisFormat?: string;
tickInterval?: string;
topAxis?: boolean; topAxis?: boolean;
} }

13
packages/mermaid/src/defaultConfig.ts
View File

@@ -661,6 +661,19 @@ const config: Partial<MermaidConfig> = {
*/ */
axisFormat: '%Y-%m-%d', axisFormat: '%Y-%m-%d',
/**
* | Parameter | Description | Type | Required | Values |
* | ------------ | ------------| ------ | -------- | ------- |
* | tickInterval | axis ticks | string | Optional | string |
*
* **Notes:**
*
* Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/
*
* Default value: undefined
*/
tickInterval: undefined,
/** /**
* | Parameter | Description | Type | Required | Values | * | Parameter | Description | Type | Required | Values |
* | ----------- | ----------- | ------- | -------- | ----------- | * | ----------- | ----------- | ------- | -------- | ----------- |

122
packages/mermaid/src/diagrams/er/erRenderer.js
View File

@@ -77,31 +77,27 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
// Add a text node for the attribute type // Add a text node for the attribute type
const typeNode = groupNode const typeNode = groupNode
.append('text') .append('text')
.attr('class', 'er entityLabel') .classed('er entityLabel', true)
.attr('id', `${attrPrefix}-type`) .attr('id', `${attrPrefix}-type`)
.attr('x', 0) .attr('x', 0)
.attr('y', 0) .attr('y', 0)
.attr('dominant-baseline', 'middle') .style('dominant-baseline', 'middle')
.attr('text-anchor', 'left') .style('text-anchor', 'left')
.attr( .style('font-family', getConfig().fontFamily)
'style', .style('font-size', attrFontSize + 'px')
'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px'
)
.text(attributeType); .text(attributeType);
// Add a text node for the attribute name // Add a text node for the attribute name
const nameNode = groupNode const nameNode = groupNode
.append('text') .append('text')
.attr('class', 'er entityLabel') .classed('er entityLabel', true)
.attr('id', `${attrPrefix}-name`) .attr('id', `${attrPrefix}-name`)
.attr('x', 0) .attr('x', 0)
.attr('y', 0) .attr('y', 0)
.attr('dominant-baseline', 'middle') .style('dominant-baseline', 'middle')
.attr('text-anchor', 'left') .style('text-anchor', 'left')
.attr( .style('font-family', getConfig().fontFamily)
'style', .style('font-size', attrFontSize + 'px')
'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px'
)
.text(item.attributeName); .text(item.attributeName);
const attributeNode = {}; const attributeNode = {};
@@ -118,16 +114,14 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
if (hasKeyType) { if (hasKeyType) {
const keyTypeNode = groupNode const keyTypeNode = groupNode
.append('text') .append('text')
.attr('class', 'er entityLabel') .classed('er entityLabel', true)
.attr('id', `${attrPrefix}-key`) .attr('id', `${attrPrefix}-key`)
.attr('x', 0) .attr('x', 0)
.attr('y', 0) .attr('y', 0)
.attr('dominant-baseline', 'middle') .style('dominant-baseline', 'middle')
.attr('text-anchor', 'left') .style('text-anchor', 'left')
.attr( .style('font-family', getConfig().fontFamily)
'style', .style('font-size', attrFontSize + 'px')
'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px'
)
.text(item.attributeKeyType || ''); .text(item.attributeKeyType || '');
attributeNode.kn = keyTypeNode; attributeNode.kn = keyTypeNode;
@@ -139,16 +133,14 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
if (hasComment) { if (hasComment) {
const commentNode = groupNode const commentNode = groupNode
.append('text') .append('text')
.attr('class', 'er entityLabel') .classed('er entityLabel', true)
.attr('id', `${attrPrefix}-comment`) .attr('id', `${attrPrefix}-comment`)
.attr('x', 0) .attr('x', 0)
.attr('y', 0) .attr('y', 0)
.attr('dominant-baseline', 'middle') .style('dominant-baseline', 'middle')
.attr('text-anchor', 'left') .style('text-anchor', 'left')
.attr( .style('font-family', getConfig().fontFamily)
'style', .style('font-size', attrFontSize + 'px')
'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px'
)
.text(item.attributeComment || ''); .text(item.attributeComment || '');
attributeNode.cn = commentNode; attributeNode.cn = commentNode;
@@ -217,10 +209,10 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
// Insert a rectangle for the type // Insert a rectangle for the type
const typeRect = groupNode const typeRect = groupNode
.insert('rect', '#' + attributeNode.tn.node().id) .insert('rect', '#' + attributeNode.tn.node().id)
.attr('class', `er ${attribStyle}`) .classed(`er ${attribStyle}`, true)
.attr('fill', conf.fill) .style('fill', conf.fill)
.attr('fill-opacity', '100%') .style('fill-opacity', '100%')
.attr('stroke', conf.stroke) .style('stroke', conf.stroke)
.attr('x', 0) .attr('x', 0)
.attr('y', heightOffset) .attr('y', heightOffset)
.attr('width', maxTypeWidth + widthPadding * 2 + spareColumnWidth) .attr('width', maxTypeWidth + widthPadding * 2 + spareColumnWidth)
@@ -237,10 +229,10 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
// Insert a rectangle for the name // Insert a rectangle for the name
const nameRect = groupNode const nameRect = groupNode
.insert('rect', '#' + attributeNode.nn.node().id) .insert('rect', '#' + attributeNode.nn.node().id)
.attr('class', `er ${attribStyle}`) .classed(`er ${attribStyle}`, true)
.attr('fill', conf.fill) .style('fill', conf.fill)
.attr('fill-opacity', '100%') .style('fill-opacity', '100%')
.attr('stroke', conf.stroke) .style('stroke', conf.stroke)
.attr('x', nameXOffset) .attr('x', nameXOffset)
.attr('y', heightOffset) .attr('y', heightOffset)
.attr('width', maxNameWidth + widthPadding * 2 + spareColumnWidth) .attr('width', maxNameWidth + widthPadding * 2 + spareColumnWidth)
@@ -259,10 +251,10 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
// Insert a rectangle for the key type // Insert a rectangle for the key type
const keyTypeRect = groupNode const keyTypeRect = groupNode
.insert('rect', '#' + attributeNode.kn.node().id) .insert('rect', '#' + attributeNode.kn.node().id)
.attr('class', `er ${attribStyle}`) .classed(`er ${attribStyle}`, true)
.attr('fill', conf.fill) .style('fill', conf.fill)
.attr('fill-opacity', '100%') .style('fill-opacity', '100%')
.attr('stroke', conf.stroke) .style('stroke', conf.stroke)
.attr('x', keyTypeAndCommentXOffset) .attr('x', keyTypeAndCommentXOffset)
.attr('y', heightOffset) .attr('y', heightOffset)
.attr('width', maxKeyWidth + widthPadding * 2 + spareColumnWidth) .attr('width', maxKeyWidth + widthPadding * 2 + spareColumnWidth)
@@ -282,10 +274,10 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
// Insert a rectangle for the comment // Insert a rectangle for the comment
groupNode groupNode
.insert('rect', '#' + attributeNode.cn.node().id) .insert('rect', '#' + attributeNode.cn.node().id)
.attr('class', `er ${attribStyle}`) .classed(`er ${attribStyle}`, 'true')
.attr('fill', conf.fill) .style('fill', conf.fill)
.attr('fill-opacity', '100%') .style('fill-opacity', '100%')
.attr('stroke', conf.stroke) .style('stroke', conf.stroke)
.attr('x', keyTypeAndCommentXOffset) .attr('x', keyTypeAndCommentXOffset)
.attr('y', heightOffset) .attr('y', heightOffset)
.attr('width', maxCommentWidth + widthPadding * 2 + spareColumnWidth) .attr('width', maxCommentWidth + widthPadding * 2 + spareColumnWidth)
@@ -335,16 +327,14 @@ const drawEntities = function (svgNode, entities, graph) {
const textId = 'text-' + entityId; const textId = 'text-' + entityId;
const textNode = groupNode const textNode = groupNode
.append('text') .append('text')
.attr('class', 'er entityLabel') .classed('er entityLabel', true)
.attr('id', textId) .attr('id', textId)
.attr('x', 0) .attr('x', 0)
.attr('y', 0) .attr('y', 0)
.attr('dominant-baseline', 'middle') .style('dominant-baseline', 'middle')
.attr('text-anchor', 'middle') .style('text-anchor', 'middle')
.attr( .style('font-family', getConfig().fontFamily)
'style', .style('font-size', conf.fontSize + 'px')
'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
)
.text(entityName); .text(entityName);
const { width: entityWidth, height: entityHeight } = drawAttributes( const { width: entityWidth, height: entityHeight } = drawAttributes(
@@ -356,10 +346,10 @@ const drawEntities = function (svgNode, entities, graph) {
// Draw the rectangle - insert it before the text so that the text is not obscured // Draw the rectangle - insert it before the text so that the text is not obscured
const rectNode = groupNode const rectNode = groupNode
.insert('rect', '#' + textId) .insert('rect', '#' + textId)
.attr('class', 'er entityBox') .classed('er entityBox', true)
.style('fill', conf.fill) .style('fill', conf.fill)
.attr('fill-opacity', '100%') .style('fill-opacity', '100%')
.attr('stroke', conf.stroke) .style('stroke', conf.stroke)
.attr('x', 0) .attr('x', 0)
.attr('y', 0) .attr('y', 0)
.attr('width', entityWidth) .attr('width', entityWidth)
@@ -460,10 +450,10 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
// Insert the line at the right place // Insert the line at the right place
const svgPath = svg const svgPath = svg
.insert('path', '#' + insert) .insert('path', '#' + insert)
.attr('class', 'er relationshipLine') .classed('er relationshipLine', true)
.attr('d', lineFunction(edge.points)) .attr('d', lineFunction(edge.points))
.attr('stroke', conf.stroke) .style('stroke', conf.stroke)
.attr('fill', 'none'); .style('fill', 'none');
// ...and with dashes if necessary // ...and with dashes if necessary
if (rel.relSpec.relType === diagObj.db.Identification.NON_IDENTIFYING) { if (rel.relSpec.relType === diagObj.db.Identification.NON_IDENTIFYING) {
@@ -537,16 +527,14 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
const labelNode = svg const labelNode = svg
.append('text') .append('text')
.attr('class', 'er relationshipLabel') .classed('er relationshipLabel', true)
.attr('id', labelId) .attr('id', labelId)
.attr('x', labelPoint.x) .attr('x', labelPoint.x)
.attr('y', labelPoint.y) .attr('y', labelPoint.y)
.attr('text-anchor', 'middle') .style('text-anchor', 'middle')
.attr('dominant-baseline', 'middle') .style('dominant-baseline', 'middle')
.attr( .style('font-family', getConfig().fontFamily)
'style', .style('font-size', conf.fontSize + 'px')
'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
)
.text(rel.roleA); .text(rel.roleA);
// Figure out how big the opaque 'container' rectangle needs to be // Figure out how big the opaque 'container' rectangle needs to be
@@ -555,13 +543,13 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
// Insert the opaque rectangle before the text label // Insert the opaque rectangle before the text label
svg svg
.insert('rect', '#' + labelId) .insert('rect', '#' + labelId)
.attr('class', 'er relationshipLabelBox') .classed('er relationshipLabelBox', true)
.attr('x', labelPoint.x - labelBBox.width / 2) .attr('x', labelPoint.x - labelBBox.width / 2)
.attr('y', labelPoint.y - labelBBox.height / 2) .attr('y', labelPoint.y - labelBBox.height / 2)
.attr('width', labelBBox.width) .attr('width', labelBBox.width)
.attr('height', labelBBox.height) .attr('height', labelBBox.height)
.attr('fill', 'white') .style('fill', 'white')
.attr('fill-opacity', '85%'); .style('fill-opacity', '85%');
}; };
/** /**

12
packages/mermaid/src/diagrams/gantt/ganttDb.js
View File

@@ -17,6 +17,7 @@ import {
let dateFormat = ''; let dateFormat = '';
let axisFormat = ''; let axisFormat = '';
let tickInterval = undefined;
let todayMarker = ''; let todayMarker = '';
let includes = []; let includes = [];
let excludes = []; let excludes = [];
@@ -47,6 +48,7 @@ export const clear = function () {
rawTasks = []; rawTasks = [];
dateFormat = ''; dateFormat = '';
axisFormat = ''; axisFormat = '';
tickInterval = undefined;
todayMarker = ''; todayMarker = '';
includes = []; includes = [];
excludes = []; excludes = [];
@@ -65,6 +67,14 @@ export const getAxisFormat = function () {
return axisFormat; return axisFormat;
}; };
export const setTickInterval = function (txt) {
tickInterval = txt;
};
export const getTickInterval = function () {
return tickInterval;
};
export const setTodayMarker = function (txt) { export const setTodayMarker = function (txt) {
todayMarker = txt; todayMarker = txt;
}; };
@@ -647,6 +657,8 @@ export default {
topAxisEnabled, topAxisEnabled,
setAxisFormat, setAxisFormat,
getAxisFormat, getAxisFormat,
setTickInterval,
getTickInterval,
setTodayMarker, setTodayMarker,
getTodayMarker, getTodayMarker,
setAccTitle, setAccTitle,

54
packages/mermaid/src/diagrams/gantt/ganttRenderer.js
View File

@@ -10,6 +10,11 @@ import {
axisBottom, axisBottom,
axisTop, axisTop,
timeFormat, timeFormat,
timeMinute,
timeHour,
timeDay,
timeWeek,
timeMonth,
} from 'd3'; } from 'd3';
import common from '../common/common'; import common from '../common/common';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
@@ -495,6 +500,33 @@ export const draw = function (text, id, version, diagObj) {
.tickSize(-h + theTopPad + conf.gridLineStartPadding) .tickSize(-h + theTopPad + conf.gridLineStartPadding)
.tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
const reTickInterval = /^([1-9][0-9]*)(minute|hour|day|week|month)$/;
const resultTickInterval = reTickInterval.exec(
diagObj.db.getTickInterval() || conf.tickInterval
);
if (resultTickInterval !== null) {
const every = resultTickInterval[1];
const interval = resultTickInterval[2];
switch (interval) {
case 'minute':
bottomXAxis.ticks(timeMinute.every(every));
break;
case 'hour':
bottomXAxis.ticks(timeHour.every(every));
break;
case 'day':
bottomXAxis.ticks(timeDay.every(every));
break;
case 'week':
bottomXAxis.ticks(timeWeek.every(every));
break;
case 'month':
bottomXAxis.ticks(timeMonth.every(every));
break;
}
}
svg svg
.append('g') .append('g')
.attr('class', 'grid') .attr('class', 'grid')
@@ -512,6 +544,28 @@ export const draw = function (text, id, version, diagObj) {
.tickSize(-h + theTopPad + conf.gridLineStartPadding) .tickSize(-h + theTopPad + conf.gridLineStartPadding)
.tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
if (resultTickInterval !== null) {
const every = resultTickInterval[1];
const interval = resultTickInterval[2];
switch (interval) {
case 'minute':
topXAxis.ticks(timeMinute.every(every));
break;
case 'hour':
topXAxis.ticks(timeHour.every(every));
break;
case 'day':
topXAxis.ticks(timeDay.every(every));
break;
case 'week':
topXAxis.ticks(timeWeek.every(every));
break;
case 'month':
topXAxis.ticks(timeMonth.every(every));
break;
}
}
svg svg
.append('g') .append('g')
.attr('class', 'grid') .attr('class', 'grid')

2
packages/mermaid/src/diagrams/gantt/parser/gantt.jison
View File

@@ -82,6 +82,7 @@ that id.
"inclusiveEndDates" return 'inclusiveEndDates'; "inclusiveEndDates" return 'inclusiveEndDates';
"topAxis" return 'topAxis'; "topAxis" return 'topAxis';
"axisFormat"\s[^#\n;]+ return 'axisFormat'; "axisFormat"\s[^#\n;]+ return 'axisFormat';
"tickInterval"\s[^#\n;]+ return 'tickInterval';
"includes"\s[^#\n;]+ return 'includes'; "includes"\s[^#\n;]+ return 'includes';
"excludes"\s[^#\n;]+ return 'excludes'; "excludes"\s[^#\n;]+ return 'excludes';
"todayMarker"\s[^\n;]+ return 'todayMarker'; "todayMarker"\s[^\n;]+ return 'todayMarker';
@@ -125,6 +126,7 @@ statement
| inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);} | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);}
| topAxis {yy.TopAxis();$$=$1.substr(8);} | topAxis {yy.TopAxis();$$=$1.substr(8);}
| axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);} | axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);}
| tickInterval {yy.setTickInterval($1.substr(13));$$=$1.substr(13);}
| excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);} | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
| includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);} | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
| todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);} | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}

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

@@ -174,6 +174,22 @@ The following formatting strings are supported:
More info in: https://github.com/mbostock/d3/wiki/Time-Formatting More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
### Axis ticks
The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.
```
tickInterval 1day
```
The pattern is:
```
/^([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)
## Comments ## Comments
Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax