gantt
title Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..
@@ -64,7 +63,7 @@ commit
commit
merge newbranch
+
sequenceDiagram
participant a as Alice
participant j as John
@@ -146,6 +145,76 @@ requirementDiagram
end
+ flowchart TB
+ Function-->URL
+ click Function clickByFlow "Add a div"
+ click URL "https://mermaid-js.github.io/mermaid/#/" "Visit mermaid docs" _blank
+
+
+ classDiagram-v2
+ class Test
+ class ShapeLink
+ link ShapeLink "https://mermaid-js.github.io/mermaid/#/" "This is a tooltip for a link"
+ class ShapeCallback
+ callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
+
+
+ gantt
+ dateFormat YYYY-MM-DD
+ axisFormat %d/%m
+ title Adding GANTT diagram to mermaid
+ excludes weekdays 2014-01-10
+
+ section A section
+ Completed task :done, des1, 2014-01-06,2014-01-08
+ Active task :active, des2, 2014-01-09, 3d
+ Future task : des3, after des2, 5d
+ Future task2 : des4, after des3, 5d
+
+ section Critical tasks
+ Completed task in the critical line :crit, done, 2014-01-06,24h
+ Implement parser and jison :crit, done, after des1, 2d
+ Create tests for parser :crit, active, 3d
+ Future task in critical line :crit, 5d
+ Create tests for renderer :2d
+ Add to mermaid :1d
+
+ section Documentation
+ Describe gantt syntax :active, a1, after des1, 3d
+ Add gantt diagram to demo page :after a1 , 20h
+ Add another diagram to demo page :doc1, after a1 , 48h
+
+ section Clickable
+ Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
+ Calling a Callback (look at the console log) :cl2, after cl1, 3d
+ Calling a Callback with args :cl3, after cl1, 3d
+
+ click cl1 href "https://mermaid-js.github.io/mermaid/#/"
+ click cl2 call clickByGantt()
+ click cl3 call clickByGantt("test1", test2, test3)
+
+ section Last section
+ Describe gantt syntax :after doc1, 3d
+ Add gantt diagram to demo page : 20h
+ Add another diagram to demo page : 48h
+
+
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+ int id
+ size()
+}
+
+
stateDiagram
[*] --> S1
state "Some long name" as S1
@@ -181,7 +250,7 @@ requirementDiagram
};
mermaid.initialize({
// theme: 'dark',
- theme: 'forest',
+ // theme: 'forest',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
flowchart: {
@@ -192,6 +261,7 @@ requirementDiagram
},
class: {
defaultRenderer: 'dagre-d3',
+ htmlLabels: true,
},
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
@@ -212,6 +282,15 @@ requirementDiagram
function callback() {
alert('It worked');
}
+
+function clickByFlow(elemName) {
+ const div = document.createElement('div');
+ div.className = 'created-by-click';
+ div.style = 'padding: 20px; background: green; color: white;';
+ div.innerText = 'Clicked By Flow';
+
+ document.getElementsByTagName('body')[0].appendChild(div);
+}