Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#1590 Theme base tweaked for custom theming
- Loading branch information
Showing
12 changed files
with
302 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,245 @@ | ||
| <html> | ||
| <head> | ||
| <link | ||
| href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
| <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet"> | ||
| <style> | ||
| body { | ||
| /* background: rgb(221, 208, 208); */ | ||
| background: #f4f4f4; | ||
| background: #222; | ||
| font-family: 'Arial'; | ||
| height: 100%; | ||
| width: 100%; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| h1 { color: grey;} | ||
| .mermaid2 { | ||
| display: none; | ||
| } | ||
| .height { | ||
| min-height: 600px; | ||
| height: 600px; | ||
| } | ||
| .height2 { | ||
| min-height: 600px; | ||
| height: 1300px; | ||
| } | ||
| .width { | ||
| width: 33%; | ||
| border: 1px solid blue; | ||
| padding: 10px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1>Showcases of diagrams</h1> | ||
| <div class="flex flex-wrap"> | ||
| <div class="mermaid width height"> | ||
| graph TD | ||
| A[Christmas] -->|Get money| B(Go shopping) | ||
| B --> C{Let me think} | ||
| B --> G[/Another/] | ||
| C ==>|One| D[Laptop] | ||
| C -->|Two| E[iPhone] | ||
| C -->|Three| F[fa:fa-car Car] | ||
| subgraph section | ||
| C | ||
| D | ||
| E | ||
| F | ||
| G | ||
| end | ||
| </div> | ||
| <div class="mermaid width height"> | ||
| %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%% | ||
| flowchart TD | ||
| A[Christmas] -->|Get money| B(Go shopping) | ||
| B --> C{Let me think} | ||
| B --> G[Another] | ||
| C ==>|One| D[Laptop] | ||
| C x--x|Two| E[iPhone] | ||
| C o--o|Three| F[fa:fa-car Car] | ||
| subgraph section | ||
| C | ||
| D | ||
| E | ||
| F | ||
| G | ||
| end | ||
| </div> | ||
| <div class="mermaid width height" > | ||
| sequenceDiagram | ||
| autonumber | ||
| par Action 1 | ||
| Alice->>John: Hello John, how are you? | ||
| and Action 2 | ||
| Alice->>Bob: Hello Bob, how are you? | ||
| end | ||
| Alice->>+John: Hello John, how are you? | ||
| Alice->>+John: John, can you hear me? | ||
| John-->>-Alice: Hi Alice, I can hear you! | ||
| Note right of John: John is perceptive | ||
| John-->>-Alice: I feel great! | ||
| loop Every minute | ||
| John-->Alice: Great! | ||
| end | ||
| </div> | ||
| <div class="mermaid width height" > | ||
| classDiagram | ||
| Animal "1" <|-- Duck | ||
| Animal <|-- Fish | ||
| Animal <--o Zebra | ||
| Animal : +int age | ||
| Animal : +String gender | ||
| Animal: +isMammal() | ||
| Animal: +mate() | ||
| class Duck{ | ||
| +String beakColor | ||
| +swim() | ||
| +quack() | ||
| } | ||
| class Fish{ | ||
| -int sizeInFeet | ||
| -canEat() | ||
| } | ||
| class Zebra{ | ||
| +bool is_wild | ||
| +run() | ||
| } | ||
| </div> | ||
| <div class="mermaid width height"> | ||
| gantt | ||
| dateFormat :YYYY-MM-DD | ||
| title Adding GANTT diagram functionality to mermaid | ||
| excludes :excludes the named dates/days from being included in a charted task.. | ||
| 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 | ||
| </div> | ||
| <div class="mermaid width height2"> | ||
| stateDiagram | ||
| [*] --> Active | ||
|
|
||
| state Active { | ||
| [*] --> NumLockOff | ||
| NumLockOff --> NumLockOn : EvNumLockPressed | ||
| NumLockOn --> NumLockOff : EvNumLockPressed | ||
| -- | ||
| [*] --> CapsLockOff | ||
| CapsLockOff --> CapsLockOn : EvCapsLockPressed | ||
| CapsLockOn --> CapsLockOff : EvCapsLockPressed | ||
| -- | ||
| [*] --> ScrollLockOff | ||
| ScrollLockOff --> ScrollLockOn : EvCapsLockPressed | ||
| ScrollLockOn --> ScrollLockOff : EvCapsLockPressed | ||
| } | ||
| state SomethingElse { | ||
| A --> B | ||
| B --> A | ||
| } | ||
|
|
||
| Active --> SomethingElse | ||
| note right of SomethingElse : This is the note to the right. | ||
|
|
||
| SomethingElse --> [*] | ||
|
|
||
| </div> | ||
| <div class="mermaid width height2"> | ||
| stateDiagram-v2 | ||
| [*] --> Active | ||
|
|
||
| state Active { | ||
| [*] --> NumLockOff | ||
| NumLockOff --> NumLockOn : EvNumLockPressed | ||
| NumLockOn --> NumLockOff : EvNumLockPressed | ||
| -- | ||
| [*] --> CapsLockOff | ||
| CapsLockOff --> CapsLockOn : EvCapsLockPressed | ||
| CapsLockOn --> CapsLockOff : EvCapsLockPressed | ||
| -- | ||
| [*] --> ScrollLockOff | ||
| ScrollLockOff --> ScrollLockOn : EvCapsLockPressed | ||
| ScrollLockOn --> ScrollLockOff : EvCapsLockPressed | ||
| } | ||
| state SomethingElse { | ||
| A --> B | ||
| B --> A | ||
| } | ||
|
|
||
| Active --> SomethingElse2 | ||
| note right of SomethingElse2 : This is the note to the right. | ||
|
|
||
| SomethingElse2 --> [*] | ||
| </div> | ||
| <div class="mermaid width height2"> | ||
| erDiagram | ||
| CUSTOMER }|..|{ DELIVERY-ADDRESS : has | ||
| CUSTOMER ||--o{ ORDER : places | ||
| CUSTOMER ||--o{ INVOICE : "liable for" | ||
| DELIVERY-ADDRESS ||--o{ ORDER : receives | ||
| INVOICE ||--|{ ORDER : covers | ||
| ORDER ||--|{ ORDER-ITEM : includes | ||
| PRODUCT-CATEGORY ||--|{ PRODUCT : contains | ||
| PRODUCT ||--o{ ORDER-ITEM : "ordered in" | ||
| </div> | ||
| <div class="mermaid width height"> | ||
| journey | ||
| title My working day | ||
| section Go to work | ||
| Make tea: 5: Me | ||
| Go upstairs: 3: Me | ||
| Do work: 1: Me, Cat | ||
| section Go home | ||
| Go downstairs: 5: Me | ||
| Sit down: 5: Me | ||
| </div> | ||
|
|
||
| <script src="./mermaid.js"></script> | ||
| <script> | ||
| mermaid.parseError = function (err, hash) { | ||
| // console.error('Mermaid error: ', err); | ||
| }; | ||
| mermaid.initialize({ | ||
| theme: 'base', | ||
| themeVariables: { primaryColor: '#9400D3', darkMode: true, background: '#222'}, | ||
| // arrowMarkerAbsolute: true, | ||
| // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', | ||
| logLevel: 0, | ||
| flowchart: { curve: 'cardinal', "htmlLabels": false }, | ||
| // gantt: { axisFormat: '%m/%d/%Y' }, | ||
| sequence: { actorMargin: 50, showSequenceNumbers: true }, | ||
| // sequenceDiagram: { actorMargin: 300 } // deprecated | ||
| fontFamily: '"arial", sans-serif', | ||
| curve: 'cardinal', | ||
| // securityLevel: 'strict' | ||
| }); | ||
| function callback(){alert('It worked');} | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.