mermaid

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Mermaid Quick Test Page</title> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <script> function xss(x){ alert(x + ' cause an xss attack'); } </script> <style> .label text { fill: red} </style> </head> <body> <div class="mermaid"> info </div> <div class="mermaid"> graph LR; alert`xss`-->B; click B "javaSc ript:alert`salt`" "This is a tooltip for a link" </div> <div class="mermaid"> graph LR; alert`xss`-->B; click B "java script:alert`xss`" "This is a tooltip for a link" </div> <div class="mermaid"> graph LR; alert`base64`-->B; click B "data:image/png;base64,HNjcmlwdD5hbGVydCgiSGVsbG8iKTs8L3NjcmlwdD4=" </div> <img src=xss.png /> <div class="mermaid"> graph TD A["<strong>If bold then xss</strong>Christmas"] -->|Get <strong>If bold then xss</strong> money| B(Go <strong>If bold then xss</strong> shopping) B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br />sssssssssssssssssssssssssss} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[Car] </div> <div class="mermaid"> graph TB subgraph "<strong>If bold then xss</strong>" a1-->a2 end </div> <div class="mermaid"> graph TD A[Click on] -->|Get happines| BBBB(Clickable) BBBB --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[Car] click A "http://localhost:9000/index.html#link-clicked" "link test" click BBBB testClick "click test" click C "javascript:alert" "link test" classDef someclass fill:#f96; class A someclass; </div> <div class="mermaid"> graph LR; alert`md5_salt`-->B; click alert`md5_salt` eval "Tooltip for a callback" click B "javascript:alert`salt`" "This is a tooltip for a link" </div> <div class="mermaid"> 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 click cl1 href "javascript:alert`salt`" click cl2 call ganttTestClick("test", test, test) section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h </div> <div class="mermaid"> sequenceDiagram participant "Alice" participant Bob participant John as John<br/>Second Line Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you <strong>If bold then xss</strong>John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row. Bob-->Alice: Checking with John... alt either this Alice->>John: Yes else or this Alice->>John: No else or this will happen Alice->John: Maybe end par this happens in parallel Alice -->> Bob: Parallel message 1 and Alice -->> John: Parallel message 2 end </div> <div class="mermaid"> classDiagram Class01 <|-- AveryLongClass : Co<strong>If bold then xss</strong>ol Class03 "0" *-- "0..n" Class04 Class05 "1" o-- "many" Class06 Class07 .. Class08 Class09 "many" --> "1" C2 : Where am i? Class09 "0" --* "1..n" C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label </div> <div class="mermaid"> graph LR SavePropertyController --> SavePropertyCommand SavePropertyCommand --> SavePropertyCommandHandler SavePropertyCommandHandler --> EventElastica[elastica.postupdate] SavePropertyCommandHandler --> EventProperty[property.postdisable] SavePropertyController --> Exceptions Exceptions --> ExceptionList(SecurityException<br/>EmptyRequestBodyException<br/>Throwable) classDef Ui fill:#FFFFFF classDef object fill:#1E98EC classDef event fill:#ECB11E class EventElastica,EventProperty event class SavePropertyCommand,SavePropertyCommandHandler object class SavePropertyController Ui </div> <script src="./mermaid.js"></script>  <script> mermaid.initialize({ theme: 'forest', // themeCSS: '.node rect { fill: red; }', logLevel: 4, flowchart: { htmlLabels: false, curve: 'linear' }, gantt: { axisFormat: '%m/%d/%Y' }, sequence: { actorMargin: 50 }, // sequenceDiagram: { actorMargin: 300 } // deprecated securityLevel:'strict', }); </script> <script> function ganttTestClick(a, b, c){ console.log("a:", a) console.log("b:", b) console.log("c:", c) } function testClick(nodeId) { console.log("clicked", nodeId) var originalBgColor = document.querySelector('body').style.backgroundColor document.querySelector('body').style.backgroundColor = 'yellow' setTimeout(function() { document.querySelector('body').style.backgroundColor = originalBgColor }, 100) } </script> </body> </html>