| 6dd74de | | | 1 | <html> |
| 6dd74de | | | 2 | <head> |
| 6dd74de | | | 3 | <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> |
| 6dd74de | | | 4 | <style> |
| 6dd74de | | | 5 | body { |
| 6dd74de | | | 6 | /* background: rgb(221, 208, 208); */ |
| 6dd74de | | | 7 | /* background:#333; */ |
| 6dd74de | | | 8 | font-family: 'Arial'; |
| 6dd74de | | | 9 | } |
| 6dd74de | | | 10 | h1 { |
| 6dd74de | | | 11 | color: #333; |
| 6dd74de | | | 12 | font-size: 20px; |
| 6dd74de | | | 13 | text-decoration: underline; |
| 6dd74de | | | 14 | } |
| 6dd74de | | | 15 | .mermaid2 { |
| 6dd74de | | | 16 | display: none; |
| 6dd74de | | | 17 | } |
| 6dd74de | | | 18 | .dark { |
| 6dd74de | | | 19 | background: #333; |
| 6dd74de | | | 20 | } |
| 6dd74de | | | 21 | .dark h1 { |
| 6dd74de | | | 22 | color: #f4f4f4; |
| 6dd74de | | | 23 | } |
| 6dd74de | | | 24 | .size { |
| 6dd74de | | | 25 | width: 33%; |
| 6dd74de | | | 26 | height: 250px; |
| 6dd74de | | | 27 | } |
| 6dd74de | | | 28 | </style> |
| 6dd74de | | | 29 | </head> |
| 6dd74de | | | 30 | <body> |
| 6dd74de | | | 31 | <div class="flex flex-wrap"> |
| 6dd74de | | | 32 | <div class="size"> |
| 6dd74de | | | 33 | <h1>Default</h1> |
| 6dd74de | | | 34 | <pre class="mermaid"> |
| 6dd74de | | | 35 | %%{init: { 'logLevel': 0, 'theme': 'default'} }%% |
| 6dd74de | | | 36 | graph TD |
| 6dd74de | | | 37 | A(Start) --> B[/Another/] |
| 6dd74de | | | 38 | A[/Another/] --> C[End] |
| 6dd74de | | | 39 | subgraph section |
| 6dd74de | | | 40 | B |
| 6dd74de | | | 41 | C |
| 6dd74de | | | 42 | end |
| 6dd74de | | | 43 | </pre> |
| 6dd74de | | | 44 | </div> |
| 6dd74de | | | 45 | <div class="size"> |
| 6dd74de | | | 46 | <h1>Forest</h1> |
| 6dd74de | | | 47 | <pre class="mermaid"> |
| 6dd74de | | | 48 | %%{init: { 'logLevel': 1, 'theme': 'forest'} }%% |
| 6dd74de | | | 49 | graph TD |
| 6dd74de | | | 50 | A(Start) --> B[/Another/] |
| 6dd74de | | | 51 | A[/Another/] --> C[End] |
| 6dd74de | | | 52 | subgraph section |
| 6dd74de | | | 53 | B |
| 6dd74de | | | 54 | C |
| 6dd74de | | | 55 | end |
| 6dd74de | | | 56 | </pre> |
| 6dd74de | | | 57 | </div> |
| 6dd74de | | | 58 | <div class="size"> |
| 6dd74de | | | 59 | <h1>Neutral</h1> |
| 6dd74de | | | 60 | <pre class="mermaid"> |
| 6dd74de | | | 61 | %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%% |
| 6dd74de | | | 62 | graph TD |
| 6dd74de | | | 63 | A(Start) --> B[/Another/] |
| 6dd74de | | | 64 | A[/Another/] --> C[End] |
| 6dd74de | | | 65 | subgraph section |
| 6dd74de | | | 66 | B |
| 6dd74de | | | 67 | C |
| 6dd74de | | | 68 | end |
| 6dd74de | | | 69 | </pre> |
| 6dd74de | | | 70 | </div> |
| 6dd74de | | | 71 | <div class="size dark"> |
| 6dd74de | | | 72 | <h1>Dark</h1> |
| 6dd74de | | | 73 | <pre class="mermaid"> |
| 6dd74de | | | 74 | %%{init: { 'logLevel': 1, 'theme': 'dark'} }%% |
| 6dd74de | | | 75 | graph TD |
| 6dd74de | | | 76 | A(Start) --> B[/Another/] |
| 6dd74de | | | 77 | A[/Another/] --> C[End] |
| 6dd74de | | | 78 | subgraph section |
| 6dd74de | | | 79 | B |
| 6dd74de | | | 80 | C |
| 6dd74de | | | 81 | end |
| 6dd74de | | | 82 | </pre> |
| 6dd74de | | | 83 | </div> |
| 6dd74de | | | 84 | <div class="size"> |
| 6dd74de | | | 85 | <h1>Base with overriding themeVariable</h1> |
| 6dd74de | | | 86 | <pre class="mermaid"> |
| 6dd74de | | | 87 | %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%% |
| 6dd74de | | | 88 | |
| 6dd74de | | | 89 | graph TD |
| 6dd74de | | | 90 | A(Start) --> B[/Another/] |
| 6dd74de | | | 91 | A[/Another/] --> C[End] |
| 6dd74de | | | 92 | subgraph section |
| 6dd74de | | | 93 | B |
| 6dd74de | | | 94 | C |
| 6dd74de | | | 95 | end |
| 6dd74de | | | 96 | </pre> |
| 6dd74de | | | 97 | </div> |
| 6dd74de | | | 98 | <div class="size"> |
| 6dd74de | | | 99 | <h1>Nothing set, should be Default</h1> |
| 6dd74de | | | 100 | <pre class="mermaid"> |
| 6dd74de | | | 101 | %%{init: { 'logLevel': 1} }%% |
| 6dd74de | | | 102 | |
| 6dd74de | | | 103 | graph TD |
| 6dd74de | | | 104 | A(Start) --> B[/Another/] |
| 6dd74de | | | 105 | A[/Another/] --> C[End] |
| 6dd74de | | | 106 | subgraph section |
| 6dd74de | | | 107 | B |
| 6dd74de | | | 108 | C |
| 6dd74de | | | 109 | end |
| 6dd74de | | | 110 | </pre> |
| 6dd74de | | | 111 | </div> |
| 6dd74de | | | 112 | </div> |
| 6dd74de | | | 113 | |
| 6dd74de | | | 114 | <script type="module"> |
| 6dd74de | | | 115 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 116 | |
| 6dd74de | | | 117 | mermaid.initialize({ |
| 6dd74de | | | 118 | logLevel: 0, |
| 6dd74de | | | 119 | graph: { curve: 'cardinal', htmlLabels: false }, |
| 6dd74de | | | 120 | sequence: { actorMargin: 50, showSequenceNumbers: true }, |
| 6dd74de | | | 121 | fontFamily: '"arial", sans-serif', |
| 6dd74de | | | 122 | curve: 'cardinal', |
| 6dd74de | | | 123 | securityLevel: 'strict', |
| 6dd74de | | | 124 | startOnLoad: false, |
| 6dd74de | | | 125 | }); |
| 6dd74de | | | 126 | |
| 6dd74de | | | 127 | await mermaid.run(); |
| 6dd74de | | | 128 | |
| 6dd74de | | | 129 | if (window.Cypress) { |
| 6dd74de | | | 130 | window.rendered = true; |
| 6dd74de | | | 131 | } |
| 6dd74de | | | 132 | </script> |
| 6dd74de | | | 133 | </body> |
| 6dd74de | | | 134 | </html> |