From 5a7d770a58788244e06a3574ab9aa7844b5c7817 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 27 Jul 2020 10:01:34 +0200 Subject: [PATCH] #1542 Setting up base theme for custom theming --- cypress/platform/showcase_base.html | 227 ++++++++++++++++++++++ docs/_sidebar.md | 1 + docs/index.html | 4 +- docs/theming.md | 251 ++++++++++++++++++++++++- src/diagrams/er/styles.js | 6 +- src/diagrams/gantt/styles.js | 2 +- src/diagrams/state/stateRenderer-v2.js | 1 - src/diagrams/state/styles.js | 18 +- src/themes/index.js | 2 +- src/themes/theme-base.js | 81 +++++--- 10 files changed, 547 insertions(+), 46 deletions(-) create mode 100644 cypress/platform/showcase_base.html diff --git a/cypress/platform/showcase_base.html b/cypress/platform/showcase_base.html new file mode 100644 index 000000000..f1d64d89f --- /dev/null +++ b/cypress/platform/showcase_base.html @@ -0,0 +1,227 @@ + + + + + + + + + +

Showcases of diagrams

+
+
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% + 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 +
+
+%%{init: {'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 +
+
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% + + 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 +
+
+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 +
+
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% + 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 --> [*] + +
+
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% +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 --> [*] +
+
+ 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" +
+
+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 +
+ + + + + diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 320a66560..53c870f7b 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -28,5 +28,6 @@ - Beginner's Guide - [overview](n00b-overview.md) - [Getting started - easier](n00b-gettingStarted.md) + - [Theming](theming.md) - [Diagram syntax intro](n00b-syntaxReference.md) - [Advanced usage](n00b-advanced.md) diff --git a/docs/index.html b/docs/index.html index 0ded99003..39470c4a0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,8 +8,8 @@ - - + +