graph TB subgraph Distributed Agile team flow ba1(understand business requirements: e.g. variations, rules, personas) --> ba2(document user story, paying special attention in the success/acceptance criteria) ba2-->client1(approve user story and acceptance criteria) client1==rejected==>ba1 client1==approved==>qa1(create test cases) qa1-->dev2(estimate story points) dev2-->dev3(create subtasks) dev3-->dev4(branch a new feature) dev4-->dev5(create unit tests) dev5-->dev6(code) dev6-->dev7(local test) dev7-->devops1(run automated tests) devops1==test fail==>dev6 devops1==test passed==>dev8(pull request) dev8-->devops2(merge) devops2-->devops3(deploy in qa) devops3-->qa2(manual verification) qa2-->qa3(approve test) qa3==rejected==>dev9(create bugfix branch) dev9-->dev6 qa3==approved==>devops4(automated deploy in staging) devops4-->client2(UAT) client2-->ba1 end classDef classBA fill:pink; classDef classClient fill:lightgray; classDef classQA fill:orange; classDef classDev1 fill:lightcyan; classDef classDevOps fill:lightgreen; class ba1,ba2,ba3,ba4 classBA; class client1,client2,client3,client4 classClient; class qa1,qa2,qa3,qa4 classQA; class dev2,dev3,dev4,dev5,dev6,dev7,dev8,dev9 classDev1; class devops1,devops2,devops3,devops4 classDevOps;

sequenceDiagram participant Alice participant Bob participant John the Long Alice->>Bob: Hello Bob, how are you? loop Outer loop Note left of Alice: Bob thinks about
things
to say Bob-xBob: I am good thanks! loop Inner loop Bob->>John the Long: How about you John? Note right of John the Long: Bob thinks a long
long time, so long
that the text does
not fit. end end Bob-->>Alice: Checking with John... Alice->>John the Long: Yes... John, how are you? alt is sick John the Long->>Alice: Not so good :( else is well John the Long->>Alice: Feeling fresh like a daisy end opt Extra response John the Long->>Alice: Thanks for asking end

graph LR subgraph old sys 3 a3(new client)-->b3(sys3 server) end subgraph old sys 2 a2(new client)-->b2(sys2 server-link to google) oc2(Old client)-->b2 end subgraph old sys 1 a1[new client]--some message-->b1(sys1 server) oc1(Old client)-->b2 end

graph LR A[Now with default style on links]--v-->B{a = '1,2'} B-->|v|C[v] B-- ... default style on links -->Z>My default thing this] C-->D{condition}; linkStyle 0 stroke-width:2px,fill:none,stroke:blue; linkStyle default stroke-width:2px,fill:none,stroke:red;

graph LR A[Square Rect] -- Link text --> B((Circle)) A[Square Rect]--v-->D((Circle)) A --> C(Round Rect) B == testing ==> D{Rhombus} C-.->D

%% Code for flowchart below graph TB sq[Square shape] --> ci((Circle shape)) subgraph A subgraph od>Odd shape]-- Two line
edge comment --> ro di{Diamond with
line break} -.-> ro(Rounded
square
shape) di==>ro2(Rounded square shape) end %% Notice that no text in shape are added here instead that is appended further down e --> od3>Really long text with linebreak
in an Odd shape] %% Comments after double percent signs e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*ز) cyr[Cyrillic]-->cyr2((Circle shape Начало));

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid 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 Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h