mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
Merge branch 'mermaid-js-develop' into develop
This commit is contained in:
chris moran
commit
0503b64205
@ -28,4 +28,22 @@ describe('Flowchart v2', () => {
|
||||
{ flowchart: { diagramPadding: 0 } }
|
||||
);
|
||||
});
|
||||
|
||||
it('3: a link with correct arrowhead to a subgraph', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TD
|
||||
P1
|
||||
P1 -->P1.5
|
||||
subgraph P1.5
|
||||
P2
|
||||
P2.5(( A ))
|
||||
P3
|
||||
end
|
||||
P2 --> P4
|
||||
P3 --> P6
|
||||
P1.5 --> P5
|
||||
`,
|
||||
{ flowchart: { diagramPadding: 0 } }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,13 +1,29 @@
|
||||
import mermaid from '../../dist/mermaid.core';
|
||||
|
||||
const code = `graph LR
|
||||
let code = `flowchart LR
|
||||
Power_Supply --> Transmitter_A
|
||||
Power_Supply --> Transmitter_B
|
||||
Transmitter_A --> D
|
||||
Transmitter_B --> D`;
|
||||
|
||||
let code2 = `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`;
|
||||
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
theme: 'default',
|
||||
fontFamily: '"Lucida Console", Monaco, monospace',
|
||||
startOnLoad: false,
|
||||
flowchart: {
|
||||
|
||||
@ -17,110 +17,70 @@
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
.someClass > * {
|
||||
/* fill: red !important; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>info below</h1>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="flex">
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
%%{init: { 'logLevel': 0, 'theme': 'forest'} }%%
|
||||
pie title Sports in Sweden
|
||||
"Bandy" : 40
|
||||
"Ice-Hockey" : 80
|
||||
"Football" : 90
|
||||
flowchart BT
|
||||
subgraph two
|
||||
b1
|
||||
end
|
||||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
c1 --apa apa apa--> b1
|
||||
two --> c2
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
%%{init: { 'logLevel': 0, 'theme': 'default'} }%%
|
||||
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 class="mermaid" style="width: 50%; height: 200px;">
|
||||
sequenceDiagram
|
||||
Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
|
||||
Bob->>Alice: I'm short though
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
|
||||
<div class="mermaid" style="width: 50%; height: 200px;">
|
||||
%%{init: {'securityLevel': 'loose'}}%%
|
||||
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
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
|
||||
C -->|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
click A "index.html#link-clicked" "link test"
|
||||
click B callback "click test"
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 200px;">
|
||||
|
||||
flowchart BT
|
||||
subgraph a
|
||||
b1 -- ok --> b2
|
||||
end
|
||||
a -- sert --> c
|
||||
c --> d
|
||||
b1 --> d
|
||||
a --asd123 --> d
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
stateDiagram-v2
|
||||
state A {
|
||||
B1 --> B2: ok
|
||||
}
|
||||
A --> C: sert
|
||||
C --> D
|
||||
B1 --> D
|
||||
A --> D: asd123
|
||||
</div>
|
||||
</div>
|
||||
<div class="mermaid" style="width: 50%; height: 20%;">
|
||||
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
|
||||
|
||||
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
|
||||
classDiagram
|
||||
Customer "1" --> "*" Ticket
|
||||
Student "1" --> "1..*" Course
|
||||
Galaxy --> "many" Star : Contains
|
||||
</div>
|
||||
<div class="mermaid2" style="background: #3f3f3f; width: 50%; height: 20%;">
|
||||
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
|
||||
|
||||
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="mermaid2" style="background: #3f3f3f; width: 50%; height: 20%;">
|
||||
%%{init: { 'logLevel': 1} }%%
|
||||
|
||||
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>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
@ -128,20 +88,17 @@ graph TD
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
// theme: 'dark',
|
||||
// theme: 'dark',
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { useMaxWidth: true },
|
||||
graph: { curve: 'cardinal', "htmlLabels": false },
|
||||
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',
|
||||
securityLevel: 'strict'
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
</script>
|
||||
|
||||
1292
dist/mermaid.core.js
vendored
1292
dist/mermaid.core.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mermaid.core.js.map
vendored
2
dist/mermaid.core.js.map
vendored
File diff suppressed because one or more lines are too long
28476
dist/mermaid.js
vendored
28476
dist/mermaid.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mermaid.js.map
vendored
2
dist/mermaid.js.map
vendored
File diff suppressed because one or more lines are too long
27
dist/mermaid.min.js
vendored
27
dist/mermaid.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mermaid.min.js.map
vendored
2
dist/mermaid.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
# Version 8.6.0 Changes
|
||||
|
||||
**Edit this Page** [](./8.6.0_docs.md)
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/8.6.0_docs.md)
|
||||
|
||||
## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
# Change Log
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/CHANGELOG.md)
|
||||
|
||||
## [Unreleased](https://github.com/knsv/mermaid/tree/HEAD)
|
||||
|
||||
[Full Changelog](https://github.com/knsv/mermaid/compare/8.1.0...HEAD)
|
||||
@ -856,4 +858,4 @@
|
||||
## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
|
||||
|
||||
|
||||
\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
|
||||
\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
[](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
|
||||
**Edit this Page** [](./README.md)
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md)
|
||||
|
||||
|
||||
**Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
|
||||
@ -24,7 +24,7 @@ For a more detailed introduction to mermaid, look to the [Beginner's Guide](http
|
||||
|
||||
You should also Check out the list of [Integrations and Usages of Mermaid](./integrations.md)
|
||||
|
||||
You can also watch some popular mermaid tutorials.
|
||||
You can also watch some popular mermaid tutorials on the [mermaid Overview](./n00b-overview.md)
|
||||
|
||||
## [CDN](https://unpkg.com/mermaid/)
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Breaking changes
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/breakingChanges.md)
|
||||
### Breaking changes from history version to latest version:
|
||||
|
||||
## #1
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# Class diagrams
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/classDiagram.md)
|
||||
|
||||
> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
|
||||
Wikipedia
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Development
|
||||
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md)
|
||||
## Updating the documentation
|
||||
|
||||
Please continue writing documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
|
||||
|
||||
@ -1,11 +1,26 @@
|
||||
## Directives
|
||||
**Edit this Page** [](./directives.md)
|
||||
### Directives were added in [Version 8.6.0](/8.6.0_docs.md)
|
||||
|
||||
#### Init directives
|
||||
|
||||
With this version, directives are supported. Technically there are two flavors of directive: init/initialize and everything else. The init/initialize directive is parsed early in the flow enough to be able to re-initialize mermaid with a new configuration object. Example:
|
||||
## Directives were added in [Version 8.6.0](/8.6.0_docs.md). Please Read it for more information.
|
||||
|
||||
## Directives
|
||||
With this version, directives are supported. Directives are divided in two sets, by priority. the first set, containing 'init' or 'initialize' directives take priority. While the other set, containing all other kinds of directives are considered only after 'init' and the graph-type declared.
|
||||
|
||||
#### Init
|
||||
|
||||
|
||||
| Parameter | Description |Type | Required | Values|
|
||||
| --- | --- | --- | --- | --- |
|
||||
| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
|
||||
|
||||
**Notes:**
|
||||
|
||||
init would be an argument-directive: %%{init: { **insert argument here**}}%%
|
||||
|
||||
The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
|
||||
|
||||
The init/initialize directive is parsed early in the flow, enough to be able to re-initialize mermaid with a new configuration object. Example:
|
||||
```
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
graph >
|
||||
@ -14,7 +29,7 @@ A-->B
|
||||
|
||||
will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram.
|
||||
|
||||
Note: init or initialize are both acceptable as init directives. Also note that init directives are coalesced. This means:
|
||||
Note: 'init' or 'initialize' are both acceptable as init directives. Also note that init directives are coalesced. This means:
|
||||
|
||||
```
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
@ -33,10 +48,11 @@ will result an init object looking like this:
|
||||
```
|
||||
|
||||
to be sent to `mermaid.initialize(...)`
|
||||
|
||||
|
||||
#### Other directives
|
||||
|
||||
The other flavor of directive is everything else. In this category are any directives that follow the graph type declaration. Essentially, these directives will not be processed early in the flow like the init directive. Each individual graph type will handle these directives. As an example:
|
||||
In this category are any directives that follow the graph type declaration. Essentially, these directives will not be processed early in the flow like the init directive. Each individual graph type will handle these directives. As an example:
|
||||
|
||||
```
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
@ -45,15 +61,20 @@ sequenceDiagram
|
||||
Alice->>Bob: Hi Bob
|
||||
Bob->>Alice: Hi Alice
|
||||
```
|
||||
|
||||
## Chronology
|
||||
This will set the `logLevel` to `debug` and `theme` to `dark` for a sequence diagram. Then, during processing, the config for the sequence diagram is set by the `config` directive. This directive is handled in the `sequenceDb.js`. In this example, the fontFamily, fontSize, and fontWeight are all set for this sequence diagram.
|
||||
|
||||
#### Backwards Compatibility
|
||||
|
||||
Init directives and any other non-multiline directives should be backwards compatible because they will be treated as comments in prior versions of mermaid-js.
|
||||
Init directives and any other non-multiline directives should be backwards compatible, because they will be treated as comments in prior versions of mermaid-js.
|
||||
|
||||
Multiline directives, however, will pose an issue and will render an error. This is unavoidable.
|
||||
|
||||
### Wrapping
|
||||
|
||||
The `%%{wrap}%%` directive and the inline `wrap:` text hint have also been added for sequence diagrams. This has been explained in my previous comments and has not materially changed.
|
||||
|
||||
# Wrap
|
||||
| Parameter | Description |Type | Required | Values|
|
||||
| --- | --- | --- | --- | --- |
|
||||
| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
Frequently Asked Questions:
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/faq.md)
|
||||
|
||||
1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
|
||||
1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
|
||||
1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
|
||||
<link rel="stylesheet" href="theme.css">
|
||||
<script src="//cdn.jsdelivr.net/npm/mermaid@8.5.2/dist/mermaid.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/mermaid@8.6.2/dist/mermaid.min.js"></script>
|
||||
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
@ -58,7 +58,7 @@
|
||||
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
|
||||
const conf = { logLevel:4, startOnLoad: false, themeCSS:'.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }' };
|
||||
if(isDarkMode) conf.theme = 'dark';
|
||||
if(isDarkMode && false) conf.theme = 'dark';
|
||||
mermaid.initialize(conf);
|
||||
|
||||
</script>
|
||||
|
||||
@ -4,11 +4,11 @@ Creating diagrams and charts using mermaid code is simple.
|
||||
|
||||
But how is the code turned into a diagram in a web page? This is done with the use of a mermaid renderer.
|
||||
|
||||
Thankfully the mermaid renderer is very accessible, in essence it is a piece of javascript that can be called.
|
||||
The mermaid renderer is very accessible, in essence it is a piece of javascript that can be called.
|
||||
|
||||
Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot. The web browser also needs access to the online mermaid renderer which it downloads from https://cdn.jsdelivr.net/npm/mermaid
|
||||
|
||||
# For beginners, there are three relatively easy ways you can use mermaid:
|
||||
## For beginners, there are three relatively easy ways you can use mermaid:
|
||||
1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/)
|
||||
2. Using one of the many mermaid plugins
|
||||
3. Calling mermaid renderer with HTML, deployed in a friendly browser.
|
||||
@ -30,12 +30,12 @@ It is also an easier way to develop diagrams. You can also click "Copy Markdown"
|
||||
|
||||
|
||||
|
||||
The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](mermaidAPI.md) page.
|
||||
The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](https://mermaid-js.github.io/mermaid/#/Setup) page.
|
||||
|
||||
|
||||
## 2. Using mermaid plugins:
|
||||
|
||||
Thanks to the growing popularity of mermaid, many plugins already exist which incorporate a mermaid renderer. An extensive list can be found [here](integrations.md).
|
||||
Thanks to the growing popularity of mermaid, many plugins already exist which incorporate a mermaid renderer. An extensive list can be found [here](./integrations.md).
|
||||
|
||||
One example in the list is the [Atlassian Confluence mermaid plugin](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
|
||||
|
||||
|
||||
@ -1,8 +1,27 @@
|
||||
# Overview for n00bs
|
||||
# Overview for Beginners
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-overview.md)
|
||||
|
||||
mermaid is a tool that aims to make diagrams and flowcharts for documentation, easier.
|
||||
## There is no explanation like a Good Diagram
|
||||
|
||||
with mermaid, diagrams can be created through comments like this in a script:
|
||||
A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so, for documentation.
|
||||
|
||||
mermaid aims to change that.
|
||||
|
||||
## Creating and Maintaining Diagrams should not be an expensive and frustrating process.
|
||||
|
||||
Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows how hard it is to make, edit and maintain good visualizations.
|
||||
|
||||
In an environment of constantly changing information , diagrams/charts become obsolete/inaccurate very fast. This hobbles the information transfer and productivity in teams.
|
||||
|
||||
# Doc Rot kills Diagrams
|
||||
|
||||
The fast setting Doc-Rot in diagrams makes it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts and the people who make them.
|
||||
|
||||
mermaid seeks to change that. mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than most traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams.
|
||||
|
||||
# The primary objective of mermaid is to help in addressing the problem of Doc Rot.
|
||||
|
||||
With mermaid, diagrams can be created through comments like this in a script:
|
||||
|
||||
```
|
||||
graph TD
|
||||
@ -15,15 +34,41 @@ And they are rendered into this and made part of the documentation:
|
||||
|
||||
|
||||
|
||||
Most of the similar visuals that you might need to create can be scripted in a similar way, with a varitety of different symbols and chart types available.
|
||||
Since the diagram source is text based, it can be part of production scripts (and other pieces of code). So less time needs be spent on documenting as a separate task.
|
||||
## Advantages of Using Mermaid
|
||||
|
||||
Comparing with Visio and similar applications, mermaid is a really fast way to create good visualizations. This is especially apparent when editing a complex visualisations, a process that usually takes hours in a desktop application, but only takes minutes (or even less if generation has been scripted) with mermaid.
|
||||
- The Advantages of mermaid include its ease of generation, modification and rendering.
|
||||
- The number of integrations that it has.
|
||||
- It is a package that can be deployed to create
|
||||
|
||||
mermaid can potentially cut down the amount of time and effort spent on the process of creating diagrams, to a fraction of what you usually put in.
|
||||
|
||||
However, a lot of the mermaid documentation is geared to professional frontend developers, presuming a skill set which I simply do not have.
|
||||
## Diagramming and charting is a gigantic waste of developer time, but not having diagrams ruins productivity.
|
||||
|
||||
If you need some basic instructions and introductions, here are a few good places to start:
|
||||
mermaid can cut down the amount of time, effort and the learning curve that is associated with creating diagrams and charts, by a wide margin.
|
||||
|
||||
For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted), or you can try out the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/), alternatively, you could also view the [integrations and uses](https://github.com/mermaid-js/mermaid/blob/develop/docs/integrations.md) for mermaid.
|
||||
Because, the text base for diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code). So less time needs be spent on documenting, as a separate task.
|
||||
|
||||
|
||||
## mermaid helps Documentation catch up with Development, in quickly changing projects.
|
||||
|
||||
Being based on markdown, mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render simple diagrams, at much faster speeds.
|
||||
In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials in the internet.
|
||||
|
||||
## mermaid is for everyone.
|
||||
|
||||
For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
|
||||
You can try out the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/).
|
||||
Alternatively, you could also view the [integrations and uses](https://mermaid-js.github.io/mermaid/#/./integrations).
|
||||
|
||||
# For anyone who may need video tutorials, here is a list of beginner friendly introductions:
|
||||
|
||||
https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s
|
||||
|
||||
https://www.youtube.com/watch?v=5RQqht3NNSE
|
||||
|
||||
https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
|
||||
|
||||
https://www.youtube.com/watch?v=9HZzKkAqrX8
|
||||
|
||||
https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
|
||||
|
||||
https://www.youtube.com/watch?v=9HZzKkAqrX8
|
||||
|
||||
@ -1,6 +1,30 @@
|
||||
## Diagram syntax reference
|
||||
## Diagram syntax
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-syntaxReference.md)
|
||||
|
||||
If you are new to mermaid, read the [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics of mermaid.
|
||||
Video Tutorials can be found at the bottom of the Overview Section.
|
||||
|
||||
This section is a list of diagram types supported by mermaid. Below is a list of links to aricles that explain the syntax of the diagrams or charts that 0can be called.
|
||||
|
||||
They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer.
|
||||
|
||||
### The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.
|
||||
|
||||
## mermaid tag:
|
||||
These Diagram Definitions can be entered within a \<div class=mermaid> tag.
|
||||
like so :
|
||||
```
|
||||
<div class="mermaid">
|
||||
graph LR
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
</div>
|
||||
```
|
||||
## mermaid Live Editor
|
||||
These definitions can also be entered into the [mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor), to render them immediately.
|
||||
This would then offer
|
||||
|
||||
Having already [gotten started](n00b-gettingStarted.md), existing diagram syntax documentation was easy enough to follow even for a n00b like me..
|
||||
|
||||
- [Flowchart](flowchart.md)
|
||||
- [Sequence diagram](sequenceDiagram.md)
|
||||
@ -8,4 +32,6 @@ Having already [gotten started](n00b-gettingStarted.md), existing diagram syntax
|
||||
- [State Diagram](stateDiagram.md)
|
||||
- [Gantt](gantt.md)
|
||||
- [Pie Chart](pie.md)
|
||||
|
||||
- [Entity Relationship Diagram](entityRelationshipDiagram.md)
|
||||
- [User Journey Diagram](user-journey.md)
|
||||
- [Directives](directives.md)
|
||||
|
||||
File diff suppressed because one or more lines are too long
10
docs/theme_themed.css
Normal file
10
docs/theme_themed.css
Normal file
File diff suppressed because one or more lines are too long
@ -1,11 +1,20 @@
|
||||
# Usage
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
|
||||
|
||||
## Installation
|
||||
|
||||
### npm package
|
||||
### npm package
|
||||
|
||||
```
|
||||
yarn add mermaid
|
||||
1.You will need to isntall node v10 or 12, which would have npm.
|
||||
|
||||
2. download yarn using npm.
|
||||
|
||||
2. enter the following command:
|
||||
yarn add mermaid
|
||||
|
||||
3. You can then add mermaid as a dev dependency using this command:
|
||||
yarn add --dev mermaid
|
||||
```
|
||||
|
||||
### CDN
|
||||
@ -27,19 +36,22 @@ locate the graphs on the page and transform them to svg files.
|
||||
### Include mermaid on your web page:
|
||||
|
||||
```html
|
||||
<script src="mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
```
|
||||
|
||||
Further down on your page mermaid will look for tags with `class="mermaid"`. From these tags mermaid will try to
|
||||
read the chart definiton and replace it with the svg chart.
|
||||
|
||||
|
||||
### Define a chart like this:
|
||||
### Define a chart like thi:
|
||||
|
||||
```html
|
||||
<div class="mermaid">
|
||||
CHART DEFINITION GOES HERE
|
||||
graph LR
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -53,9 +65,51 @@ Would end up like this:
|
||||
</div>
|
||||
```
|
||||
|
||||
## Simple full example:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
graph LR
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
## Try it out, save this code as HTML and load it.
|
||||
|
||||
### To enable click event and tags in nodes
|
||||
|
||||
In version 8.2 a security improvement was introduced. A `securityLevel` configuration was introduced which sets the level of trust to be used on the parsed diagrams.
|
||||
|
||||
* **true**: (default) tags in text are encoded, click functionality is disabled
|
||||
* false: tags in text are allowed, click functionality is enabled
|
||||
|
||||
⚠️ **Note** : This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
|
||||
|
||||
If your application is taking resposibility for the diagram source security you can set the `securityLevel` accordingly. By doing this clicks and tags are again allowed.
|
||||
|
||||
```javascript
|
||||
mermaidAPI.initialize({
|
||||
securityLevel: 'loose'
|
||||
});
|
||||
```
|
||||
|
||||
## Notes:
|
||||
An id attribute is also added to mermaid tags without one.
|
||||
|
||||
### To enable click event and tags in nodes
|
||||
Mermaid can load multiple diagrams, in the same page.
|
||||
|
||||
## To enable click event and tags in nodes:
|
||||
|
||||
In version 8.2 a security improvement was introduced. A `securityLevel` configuration was introduced which sets the level of trust to be used on the parsed diagrams.
|
||||
|
||||
@ -72,26 +126,6 @@ If your application is taking resposibility for the diagram source security you
|
||||
});
|
||||
```
|
||||
|
||||
### Simple full example:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
graph LR
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
</div>
|
||||
<script src="mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Labels out of bounds
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# User Journey Diagram
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/user-journey.md)
|
||||
> User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
|
||||
|
||||
Mermaid can render user journey diagrams:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mermaid",
|
||||
"version": "8.6.0",
|
||||
"version": "8.6.2",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"main": "dist/mermaid.core.js",
|
||||
"keywords": [
|
||||
|
||||
@ -6,8 +6,8 @@ import { logger } from './logger';
|
||||
|
||||
const themes = {};
|
||||
|
||||
for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
|
||||
themes[themeName] = require(`./theme-${themeName}.js`).default;
|
||||
for (const themeName of ['default', 'forest', 'dark', 'neutral', 'base']) {
|
||||
themes[themeName] = require(`./themes/theme-${themeName}.js`);
|
||||
}
|
||||
/**
|
||||
* **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click here](8.6.0_docs.md)].**
|
||||
@ -59,7 +59,7 @@ const config = {
|
||||
* </pre>
|
||||
*/
|
||||
theme: 'default',
|
||||
themeVariables: themes.default,
|
||||
themeVariables: themes['default'].getThemeVariables(),
|
||||
themeCSS: undefined,
|
||||
/* **maxTextSize** - The maximum allowed size of the users text diamgram */
|
||||
maxTextSize: 50000,
|
||||
@ -856,17 +856,14 @@ const currentConfig = assignWithDepth({}, defaultConfig);
|
||||
|
||||
/**
|
||||
*## setSiteConfig
|
||||
|
||||
*| Function | Description | Type | Values |
|
||||
*| --------- | ------------------- | ------- | ------------------ |
|
||||
*| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|
|
||||
|
||||
***Notes:**
|
||||
*Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
|
||||
*the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
|
||||
*to the defaultConfig
|
||||
*Note: currentConfig is set in this function
|
||||
|
||||
**Default value: At default, will mirror Global Config**
|
||||
* @param conf - the base currentConfig to use as siteConfig
|
||||
* @returns {*} - the siteConfig
|
||||
@ -883,7 +880,6 @@ export const setSiteConfig = conf => {
|
||||
*| Function | Description | Type | Values |
|
||||
*| --------- | ------------------- | ------- | ------------------ |
|
||||
*| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig|
|
||||
|
||||
***Notes**:
|
||||
*Returns **any** values in siteConfig.
|
||||
* @returns {*}
|
||||
@ -896,8 +892,6 @@ export const getSiteConfig = () => {
|
||||
*| Function | Description | Type | Values |
|
||||
*| --------- | ------------------- | ------- | ------------------ |
|
||||
*| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array|
|
||||
|
||||
|
||||
***Notes**:
|
||||
*Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
|
||||
*values found in conf with key found in siteConfig.secure will be replaced with the corresponding
|
||||
@ -916,7 +910,6 @@ export const setConfig = conf => {
|
||||
*| Function | Description | Type | Return Values |
|
||||
*| --------- | ------------------- | ------- | ------------------ |
|
||||
*| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
|
||||
|
||||
***Notes**:
|
||||
*Returns **any** the currentConfig
|
||||
* @returns {*} - the currentConfig
|
||||
@ -929,7 +922,6 @@ export const getConfig = () => {
|
||||
*| Function | Description | Type | Values |
|
||||
*| --------- | ------------------- | ------- | ------------------ |
|
||||
*| sanitize |Sets the siteConfig to desired values. | Put Request |None|
|
||||
|
||||
*Ensures options parameter does not attempt to override siteConfig secure keys
|
||||
*Note: modifies options in-place
|
||||
* @param options - the potential setConfig parameter
|
||||
@ -949,7 +941,6 @@ export const sanitize = options => {
|
||||
};
|
||||
/**
|
||||
*## reset
|
||||
|
||||
*| Function | Description | Type | Required | Values |
|
||||
*| --------- | ------------------- | ------- | -------- | ------------------ |
|
||||
*| reset|Resets currentConfig to conf| Put Request | Required | None|
|
||||
|
||||
@ -107,7 +107,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
|
||||
outsidePoint.y === edges.y1 ||
|
||||
outsidePoint.y === edges.y2
|
||||
) {
|
||||
// logger.warn('calc equals on edge');
|
||||
logger.warn('calc equals on edge');
|
||||
return outsidePoint;
|
||||
}
|
||||
|
||||
@ -181,9 +181,18 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
|
||||
logger.trace('inside', edge.toCluster, point, lastPointOutside);
|
||||
|
||||
// First point inside the rect
|
||||
const insterection = intersection(node, lastPointOutside, point);
|
||||
logger.trace('intersect', insterection);
|
||||
points.push(insterection);
|
||||
const inter = intersection(node, lastPointOutside, point);
|
||||
|
||||
let pointPresent = false;
|
||||
points.forEach(p => {
|
||||
pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
|
||||
});
|
||||
// if (!pointPresent) {
|
||||
if (!points.find(e => e.x === inter.x && e.y === inter.y)) {
|
||||
points.push(inter);
|
||||
} else {
|
||||
logger.warn('no intersect', inter, points);
|
||||
}
|
||||
isInside = true;
|
||||
} else {
|
||||
if (!isInside) points.push(point);
|
||||
|
||||
@ -16,10 +16,15 @@ function intersectPolygon(node, polyPoints, point) {
|
||||
|
||||
var minX = Number.POSITIVE_INFINITY;
|
||||
var minY = Number.POSITIVE_INFINITY;
|
||||
polyPoints.forEach(function(entry) {
|
||||
minX = Math.min(minX, entry.x);
|
||||
minY = Math.min(minY, entry.y);
|
||||
});
|
||||
if (typeof polyPoints.forEach === 'function') {
|
||||
polyPoints.forEach(function(entry) {
|
||||
minX = Math.min(minX, entry.x);
|
||||
minY = Math.min(minY, entry.y);
|
||||
});
|
||||
} else {
|
||||
minX = Math.min(minX, polyPoints.x);
|
||||
minY = Math.min(minY, polyPoints.y);
|
||||
}
|
||||
|
||||
var left = x1 - node.width / 2 - minX;
|
||||
var top = y1 - node.height / 2 - minY;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
const getStyles = options =>
|
||||
`g.classGroup text {
|
||||
fill: ${options.nodeBorder};
|
||||
fill: ${options.classText};
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-family: ${options.fontFamily};
|
||||
font-size: 10px;
|
||||
|
||||
.title {
|
||||
@ -38,7 +38,7 @@ g.classGroup line {
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke: ${options.lineColor};
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
@ -48,14 +48,14 @@ g.classGroup line {
|
||||
}
|
||||
|
||||
#compositionStart, #compositionEnd, #dependencyStart, #dependencyEnd, #extensionStart, #extensionEnd {
|
||||
fill: ${options.nodeBorder};
|
||||
stroke: ${options.nodeBorder};
|
||||
fill: ${options.lineColor};
|
||||
stroke: ${options.lineColor};
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart, #aggregationEnd {
|
||||
fill: ${options.nodeBkg};
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke: ${options.lineColor};
|
||||
stroke-width: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -1,5 +1,22 @@
|
||||
const getStyles = () =>
|
||||
const getStyles = options =>
|
||||
`
|
||||
.entityBox {
|
||||
fill: ${options.mainBkg};
|
||||
stroke: ${options.nodeBorder};
|
||||
}
|
||||
|
||||
.relationshipLabelBox {
|
||||
fill: ${options.edgeLabelBackground};
|
||||
fillopactity: 0;
|
||||
background-color: ${options.edgeLabelBackground};
|
||||
rect {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.relationshipLine {
|
||||
stroke: ${options.lineColor};
|
||||
}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
const getStyles = options =>
|
||||
`.label {
|
||||
font-family: ${options.fontFamily};
|
||||
color: #333;
|
||||
color: ${options.textColor};
|
||||
}
|
||||
|
||||
.label text {
|
||||
fill: #333;
|
||||
fill: ${options.textColor};
|
||||
}
|
||||
|
||||
.node rect,
|
||||
|
||||
@ -57,8 +57,8 @@ const getStyles = options =>
|
||||
opacity: 0.8;
|
||||
shape-rendering: crispEdges;
|
||||
text {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-family: ${options.fontFamily};
|
||||
fill: ${options.textColor};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,8 +7,11 @@ const getStyles = options =>
|
||||
}
|
||||
.slice {
|
||||
font-family: ${options.fontFamily};
|
||||
fill: ${options.textColor};
|
||||
// fill: white;
|
||||
}
|
||||
.legend text {
|
||||
fill: ${options.taskTextDarkColor};
|
||||
font-family: ${options.fontFamily};
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ const getStyles = options =>
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
g.stateGroup text {
|
||||
fill: ${options.nodeBorder};
|
||||
fill: ${options.textColor};
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
|
||||
@ -23,18 +23,18 @@ g.stateGroup rect {
|
||||
}
|
||||
|
||||
g.stateGroup line {
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke: ${options.lineColor};
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.transition {
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke: ${options.lineColor};
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.stateGroup .composit {
|
||||
fill: white;
|
||||
fill: ${options.background};
|
||||
border-bottom: 1px
|
||||
}
|
||||
|
||||
@ -85,7 +85,7 @@ g.stateGroup line {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
#statediagram-barbEnd {
|
||||
fill: ${options.nodeBorder};
|
||||
fill: ${options.lineColor};
|
||||
}
|
||||
|
||||
.statediagram-cluster rect {
|
||||
@ -93,6 +93,11 @@ g.stateGroup line {
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.cluster-label, .nodeLabel {
|
||||
color: ${options.textColor};
|
||||
}
|
||||
|
||||
.statediagram-cluster rect.outer {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
@ -106,7 +111,7 @@ g.stateGroup line {
|
||||
ry: 5px;
|
||||
}
|
||||
.statediagram-cluster.statediagram-cluster .inner {
|
||||
fill: white;
|
||||
fill: ${options.background};
|
||||
}
|
||||
.statediagram-cluster.statediagram-cluster-alt .inner {
|
||||
fill: #e0e0e0;
|
||||
@ -123,7 +128,7 @@ g.stateGroup line {
|
||||
}
|
||||
.statediagram-state rect.divider {
|
||||
stroke-dasharray: 10,10;
|
||||
fill: #efefef;
|
||||
fill: ${options.altBackground ? options.altBackground : '#efefef'};
|
||||
}
|
||||
|
||||
.note-edge {
|
||||
@ -137,10 +142,21 @@ g.stateGroup line {
|
||||
rx: 0;
|
||||
ry: 0;
|
||||
}
|
||||
.statediagram-note rect {
|
||||
fill: ${options.noteBkgColor};
|
||||
stroke: ${options.noteBorderColor};
|
||||
stroke-width: 1px;
|
||||
rx: 0;
|
||||
ry: 0;
|
||||
}
|
||||
|
||||
.statediagram-note .nodeLabel {
|
||||
color: ${options.noteTextColor};
|
||||
}
|
||||
|
||||
#dependencyStart, #dependencyEnd {
|
||||
fill: ${options.nodeBorder};
|
||||
stroke: ${options.nodeBorder};
|
||||
fill: ${options.lineColor};
|
||||
stroke: ${options.lineColor};
|
||||
stroke-width: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -232,12 +232,14 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
|
||||
let sectionNumber = 0;
|
||||
let fill = '#CCC';
|
||||
let colour = 'black';
|
||||
let num = 0;
|
||||
|
||||
// Draw the tasks
|
||||
for (let i = 0; i < tasks.length; i++) {
|
||||
let task = tasks[i];
|
||||
if (lastSection !== task.section) {
|
||||
fill = fills[sectionNumber % fills.length];
|
||||
num = sectionNumber % fills.length;
|
||||
colour = textColours[sectionNumber % textColours.length];
|
||||
|
||||
const section = {
|
||||
@ -245,6 +247,7 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
|
||||
y: 50,
|
||||
text: task.section,
|
||||
fill,
|
||||
num,
|
||||
colour
|
||||
};
|
||||
|
||||
@ -269,6 +272,7 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
|
||||
task.height = conf.diagramMarginY;
|
||||
task.colour = colour;
|
||||
task.fill = fill;
|
||||
task.num = num;
|
||||
task.actors = taskActors;
|
||||
|
||||
// Draw the box with the attached line
|
||||
|
||||
@ -2,12 +2,31 @@ const getStyles = options =>
|
||||
`.label {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
color: #333;
|
||||
color: ${options.textColor};
|
||||
}
|
||||
.mouth {
|
||||
stroke: #666;
|
||||
}
|
||||
|
||||
line {
|
||||
stroke: ${options.textColor}
|
||||
}
|
||||
|
||||
.legend {
|
||||
fill: ${options.textColor};
|
||||
}
|
||||
|
||||
.label text {
|
||||
fill: #333;
|
||||
}
|
||||
.label {
|
||||
color: ${options.textColor}
|
||||
}
|
||||
|
||||
.face {
|
||||
fill: #FFF8DC;
|
||||
stroke: #999;
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
@ -72,6 +91,31 @@ const getStyles = options =>
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.task-type-0, .section-type-0 {
|
||||
${options.fillType0 ? `fill: ${options.fillType0}` : ''};
|
||||
}
|
||||
.task-type-1, .section-type-1 {
|
||||
${options.fillType0 ? `fill: ${options.fillType1}` : ''};
|
||||
}
|
||||
.task-type-2, .section-type-2 {
|
||||
${options.fillType0 ? `fill: ${options.fillType2}` : ''};
|
||||
}
|
||||
.task-type-3, .section-type-3 {
|
||||
${options.fillType0 ? `fill: ${options.fillType3}` : ''};
|
||||
}
|
||||
.task-type-4, .section-type-4 {
|
||||
${options.fillType0 ? `fill: ${options.fillType4}` : ''};
|
||||
}
|
||||
.task-type-5, .section-type-5 {
|
||||
${options.fillType0 ? `fill: ${options.fillType5}` : ''};
|
||||
}
|
||||
.task-type-6, .section-type-6 {
|
||||
${options.fillType0 ? `fill: ${options.fillType6}` : ''};
|
||||
}
|
||||
.task-type-7, .section-type-7 {
|
||||
${options.fillType0 ? `fill: ${options.fillType7}` : ''};
|
||||
}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
||||
@ -24,8 +24,7 @@ export const drawFace = function(element, faceData) {
|
||||
.append('circle')
|
||||
.attr('cx', faceData.cx)
|
||||
.attr('cy', faceData.cy)
|
||||
.attr('fill', '#FFF8DC')
|
||||
.attr('stroke', '#999')
|
||||
.attr('class', 'face')
|
||||
.attr('r', radius)
|
||||
.attr('stroke-width', 2)
|
||||
.attr('overflow', 'visible');
|
||||
@ -61,6 +60,7 @@ export const drawFace = function(element, faceData) {
|
||||
//mouth
|
||||
face
|
||||
.append('path')
|
||||
.attr('class', 'mouth')
|
||||
.attr('d', arc)
|
||||
.attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 2) + ')');
|
||||
}
|
||||
@ -74,6 +74,7 @@ export const drawFace = function(element, faceData) {
|
||||
//mouth
|
||||
face
|
||||
.append('path')
|
||||
.attr('class', 'mouth')
|
||||
.attr('d', arc)
|
||||
.attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 7) + ')');
|
||||
}
|
||||
@ -81,12 +82,13 @@ export const drawFace = function(element, faceData) {
|
||||
function ambivalent(face) {
|
||||
face
|
||||
.append('line')
|
||||
.attr('class', 'mouth')
|
||||
.attr('stroke', 2)
|
||||
.attr('x1', faceData.cx - 5)
|
||||
.attr('y1', faceData.cy + 7)
|
||||
.attr('x2', faceData.cx + 5)
|
||||
.attr('y2', faceData.cy + 7)
|
||||
.attr('class', 'task-line')
|
||||
.attr('class', 'mouth')
|
||||
.attr('stroke-width', '1px')
|
||||
.attr('stroke', '#666');
|
||||
}
|
||||
@ -128,7 +130,8 @@ export const drawText = function(elem, textData) {
|
||||
const textElem = elem.append('text');
|
||||
textElem.attr('x', textData.x);
|
||||
textElem.attr('y', textData.y);
|
||||
textElem.attr('fill', textData.fill);
|
||||
textElem.attr('class', 'legend');
|
||||
|
||||
textElem.style('text-anchor', textData.anchor);
|
||||
|
||||
if (typeof textData.class !== 'undefined') {
|
||||
@ -184,7 +187,7 @@ export const drawSection = function(elem, section, conf) {
|
||||
rect.fill = section.fill;
|
||||
rect.width = conf.width;
|
||||
rect.height = conf.height;
|
||||
rect.class = 'journey-section';
|
||||
rect.class = 'journey-section section-type-' + section.num;
|
||||
rect.rx = 3;
|
||||
rect.ry = 3;
|
||||
drawRect(g, rect);
|
||||
@ -196,7 +199,7 @@ export const drawSection = function(elem, section, conf) {
|
||||
rect.y,
|
||||
rect.width,
|
||||
rect.height,
|
||||
{ class: 'journey-section' },
|
||||
{ class: 'journey-section section-type-' + section.num },
|
||||
conf,
|
||||
section.colour
|
||||
);
|
||||
@ -237,7 +240,7 @@ export const drawTask = function(elem, task, conf) {
|
||||
rect.fill = task.fill;
|
||||
rect.width = conf.width;
|
||||
rect.height = conf.height;
|
||||
rect.class = 'task';
|
||||
rect.class = 'task task-type-' + task.num;
|
||||
rect.rx = 3;
|
||||
rect.ry = 3;
|
||||
drawRect(g, rect);
|
||||
@ -356,7 +359,7 @@ const _drawTextCandidateFunc = (function() {
|
||||
}
|
||||
}
|
||||
|
||||
function byFo(content, g, x, y, width, height, textAttrs, conf, colour) {
|
||||
function byFo(content, g, x, y, width, height, textAttrs, conf) {
|
||||
const body = g.append('switch');
|
||||
const f = body
|
||||
.append('foreignObject')
|
||||
@ -374,10 +377,11 @@ const _drawTextCandidateFunc = (function() {
|
||||
|
||||
text
|
||||
.append('div')
|
||||
.attr('class', 'label')
|
||||
.style('display', 'table-cell')
|
||||
.style('text-align', 'center')
|
||||
.style('vertical-align', 'middle')
|
||||
.style('color', colour)
|
||||
// .style('color', colour)
|
||||
.text(content);
|
||||
|
||||
byTspan(content, body, x, y, width, height, textAttrs, conf);
|
||||
|
||||
@ -53,8 +53,8 @@ import configApi from './config';
|
||||
import getStyles from './styles';
|
||||
const themes = {};
|
||||
|
||||
for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
|
||||
themes[themeName] = require(`./theme-${themeName}.js`);
|
||||
for (const themeName of ['default', 'forest', 'dark', 'neutral', 'base']) {
|
||||
themes[themeName] = require(`./themes/theme-${themeName}.js`);
|
||||
}
|
||||
|
||||
function parse(text) {
|
||||
@ -523,10 +523,10 @@ function updateRendererConfigs(conf) {
|
||||
}
|
||||
|
||||
function reinitialize(options) {
|
||||
console.warn(`mermaidAPI.reinitialize: v${pkg.version}`, options);
|
||||
// console.warn(`mermaidAPI.reinitialize: v${pkg.version}`, options);
|
||||
if (options.theme && themes[options.theme]) {
|
||||
// Todo merge with user options
|
||||
options.themeVariables = themes[options.theme];
|
||||
options.themeVariables = themes[options.theme].getThemeVariables(options.themeVariables);
|
||||
}
|
||||
|
||||
// Set default options
|
||||
@ -537,12 +537,12 @@ function reinitialize(options) {
|
||||
}
|
||||
|
||||
function initialize(options) {
|
||||
console.log(`mermaidAPI.initialize: v${pkg.version} ${options}`);
|
||||
// console.log(`mermaidAPI.initialize: v${pkg.version} ${options}`);
|
||||
// Set default options
|
||||
|
||||
if (options && options.theme && themes[options.theme]) {
|
||||
// Todo merge with user options
|
||||
options.themeVariables = themes[options.theme];
|
||||
options.themeVariables = themes[options.theme].getThemeVariables(options.themeVariables);
|
||||
} else {
|
||||
if (options) options.themeVariables = themes.default;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import classDiagram from './diagrams/class/styles';
|
||||
import er from './diagrams/flowchart/styles';
|
||||
import er from './diagrams/er/styles';
|
||||
import flowchart from './diagrams/flowchart/styles';
|
||||
import gantt from './diagrams/gantt/styles';
|
||||
import git from './diagrams/git/styles';
|
||||
@ -24,10 +24,13 @@ const themes = {
|
||||
journey
|
||||
};
|
||||
|
||||
const getStyles = (type, userStyles, options) =>
|
||||
` {
|
||||
export const calcThemeVariables = (theme, userOverRides) => theme.calcColors(userOverRides);
|
||||
|
||||
const getStyles = (type, userStyles, options) => {
|
||||
return ` {
|
||||
font-family: ${options.fontFamily};
|
||||
font-size: ${options.fontSize};
|
||||
fill: ${options.textColor}
|
||||
}
|
||||
|
||||
/* Classes common for multiple diagrams */
|
||||
@ -72,6 +75,9 @@ const getStyles = (type, userStyles, options) =>
|
||||
${themes[type](options)}
|
||||
|
||||
${userStyles}
|
||||
|
||||
${type} { fill: apa;}
|
||||
`;
|
||||
};
|
||||
|
||||
export default getStyles;
|
||||
|
||||
@ -1,67 +0,0 @@
|
||||
import { lighten, rgba } from 'khroma';
|
||||
|
||||
export const mainBkg = '#1f2020';
|
||||
export const secondBkg = lighten('#1f2020', 16);
|
||||
export const mainContrastColor = 'lightgrey';
|
||||
export const darkTextColor = '#323D47';
|
||||
export const lineColor = mainContrastColor;
|
||||
export const border1 = '#81B1DB';
|
||||
export const border2 = rgba(255, 255, 255, 0.25);
|
||||
export const arrowheadColor = mainContrastColor;
|
||||
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||
export const fontSize = '16px';
|
||||
/* Flowchart variables */
|
||||
|
||||
export const nodeBkg = mainBkg;
|
||||
export const nodeBorder = border1;
|
||||
export const clusterBkg = secondBkg;
|
||||
export const clusterBorder = border2;
|
||||
export const defaultLinkColor = lineColor;
|
||||
export const titleColor = '#F9FFFE';
|
||||
export const edgeLabelBackground = '#e8e8e8';
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
export const actorBorder = border1;
|
||||
export const actorBkg = mainBkg;
|
||||
export const actorTextColor = mainContrastColor;
|
||||
export const actorLineColor = mainContrastColor;
|
||||
export const signalColor = mainContrastColor;
|
||||
export const signalTextColor = mainContrastColor;
|
||||
export const labelBoxBkgColor = actorBkg;
|
||||
export const labelBoxBorderColor = actorBorder;
|
||||
export const labelTextColor = mainContrastColor;
|
||||
export const loopTextColor = mainContrastColor;
|
||||
export const noteBorderColor = border2;
|
||||
export const noteBkgColor = '#fff5ad';
|
||||
export const noteTextColor = mainBkg;
|
||||
export const activationBorderColor = border1;
|
||||
export const activationBkgColor = secondBkg;
|
||||
export const sequenceNumberColor = 'black';
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
export const sectionBkgColor = rgba(255, 255, 255, 0.3);
|
||||
export const altSectionBkgColor = 'white';
|
||||
export const sectionBkgColor2 = '#EAE8B9';
|
||||
export const taskBorderColor = rgba(255, 255, 255, 0.5);
|
||||
export const taskBkgColor = mainBkg;
|
||||
export const taskTextColor = darkTextColor;
|
||||
export const taskTextLightColor = mainContrastColor;
|
||||
export const taskTextOutsideColor = taskTextLightColor;
|
||||
export const taskTextClickableColor = '#003163';
|
||||
export const activeTaskBorderColor = rgba(255, 255, 255, 0.5);
|
||||
export const activeTaskBkgColor = '#81B1DB';
|
||||
export const gridColor = mainContrastColor;
|
||||
export const doneTaskBkgColor = mainContrastColor;
|
||||
export const doneTaskBorderColor = 'grey';
|
||||
export const critBorderColor = '#E83737';
|
||||
export const critBkgColor = '#E83737';
|
||||
export const taskTextDarkColor = darkTextColor;
|
||||
export const todayLineColor = '#DB5757';
|
||||
|
||||
/* state colors */
|
||||
export const labelColor = 'black';
|
||||
|
||||
export const errorBkgColor = '#a44141';
|
||||
export const errorTextColor = '#ddd';
|
||||
@ -1,64 +0,0 @@
|
||||
export const mainBkg = '#ECECFF';
|
||||
export const secondBkg = '#ffffde';
|
||||
export const lineColor = '#333333';
|
||||
export const border1 = '#CCCCFF';
|
||||
export const border2 = '#aaaa33';
|
||||
export const arrowheadColor = '#333333';
|
||||
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||
export const fontSize = '16px';
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
export const nodeBkg = mainBkg;
|
||||
export const nodeBorder = '#9370DB';
|
||||
export const clusterBkg = secondBkg;
|
||||
export const clusterBorder = border2;
|
||||
export const defaultLinkColor = lineColor;
|
||||
export const titleColor = '#333';
|
||||
export const edgeLabelBackground = '#e8e8e8';
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
export const actorBorder = border1;
|
||||
export const actorBkg = mainBkg;
|
||||
export const actorTextColor = 'black';
|
||||
export const actorLineColor = 'grey';
|
||||
export const signalColor = '#333';
|
||||
export const signalTextColor = '#333';
|
||||
export const labelBoxBkgColor = actorBkg;
|
||||
export const labelBoxBorderColor = actorBorder;
|
||||
export const labelTextColor = actorTextColor;
|
||||
export const loopTextColor = actorTextColor;
|
||||
export const noteBorderColor = border2;
|
||||
export const noteBkgColor = '#fff5ad';
|
||||
export const noteTextColor = actorTextColor;
|
||||
export const activationBorderColor = '#666';
|
||||
export const activationBkgColor = '#f4f4f4';
|
||||
export const sequenceNumberColor = 'white';
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
export const sectionBkgColor = 'rgba(102; 102; 255; 0.49)';
|
||||
export const altSectionBkgColor = 'white';
|
||||
export const sectionBkgColor2 = '#fff400';
|
||||
export const taskBorderColor = '#534fbc';
|
||||
export const taskBkgColor = '#8a90dd';
|
||||
export const taskTextLightColor = 'white';
|
||||
export const taskTextColor = taskTextLightColor;
|
||||
export const taskTextDarkColor = 'black';
|
||||
export const taskTextOutsideColor = taskTextDarkColor;
|
||||
export const taskTextClickableColor = '#003163';
|
||||
export const activeTaskBorderColor = '#534fbc';
|
||||
export const activeTaskBkgColor = '#bfc7ff';
|
||||
export const gridColor = 'lightgrey';
|
||||
export const doneTaskBkgColor = 'lightgrey';
|
||||
export const doneTaskBorderColor = 'grey';
|
||||
export const critBorderColor = '#ff8888';
|
||||
export const critBkgColor = 'red';
|
||||
export const todayLineColor = 'red';
|
||||
|
||||
/* state colors */
|
||||
export const labelColor = 'black';
|
||||
|
||||
export const errorBkgColor = '#552222';
|
||||
export const errorTextColor = '#552222';
|
||||
@ -1,64 +0,0 @@
|
||||
export const mainBkg = '#cde498';
|
||||
export const secondBkg = '#cdffb2';
|
||||
export const lineColor = 'green';
|
||||
export const border1 = '#13540c';
|
||||
export const border2 = '#6eaa49';
|
||||
export const arrowheadColor = 'green';
|
||||
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||
export const fontSize = '16px';
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
export const nodeBkg = mainBkg;
|
||||
export const nodeBorder = border1;
|
||||
export const clusterBkg = secondBkg;
|
||||
export const clusterBorder = border2;
|
||||
export const defaultLinkColor = lineColor;
|
||||
export const titleColor = '#333';
|
||||
export const edgeLabelBackground = '#e8e8e8';
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
export const actorBorder = border1;
|
||||
export const actorBkg = mainBkg;
|
||||
export const actorTextColor = 'black';
|
||||
export const actorLineColor = 'grey';
|
||||
export const signalColor = '#333';
|
||||
export const signalTextColor = '#333';
|
||||
export const labelBoxBkgColor = actorBkg;
|
||||
export const labelBoxBorderColor = '#326932';
|
||||
export const labelTextColor = actorTextColor;
|
||||
export const loopTextColor = actorTextColor;
|
||||
export const noteBorderColor = border2;
|
||||
export const noteBkgColor = '#fff5ad';
|
||||
export const noteTextColor = actorTextColor;
|
||||
export const activationBorderColor = '#666';
|
||||
export const activationBkgColor = '#f4f4f4';
|
||||
export const sequenceNumberColor = 'white';
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
export const sectionBkgColor = '#6eaa49';
|
||||
export const altSectionBkgColor = 'white';
|
||||
export const sectionBkgColor2 = '#6eaa49';
|
||||
export const taskBorderColor = border1;
|
||||
export const taskBkgColor = '#487e3a';
|
||||
export const taskTextLightColor = 'white';
|
||||
export const taskTextColor = taskTextLightColor;
|
||||
export const taskTextDarkColor = 'black';
|
||||
export const taskTextOutsideColor = taskTextDarkColor;
|
||||
export const taskTextClickableColor = '#003163';
|
||||
export const activeTaskBorderColor = taskBorderColor;
|
||||
export const activeTaskBkgColor = mainBkg;
|
||||
export const gridColor = 'lightgrey';
|
||||
export const doneTaskBkgColor = 'lightgrey';
|
||||
export const doneTaskBorderColor = 'grey';
|
||||
export const critBorderColor = '#ff8888';
|
||||
export const critBkgColor = 'red';
|
||||
export const todayLineColor = 'red';
|
||||
|
||||
/* state colors */
|
||||
export const labelColor = 'black';
|
||||
|
||||
export const errorBkgColor = '#552222';
|
||||
export const errorTextColor = '#552222';
|
||||
@ -1,71 +0,0 @@
|
||||
import { darken, lighten } from 'khroma';
|
||||
|
||||
export const mainBkg = '#eee';
|
||||
export const contrast = '#26a';
|
||||
export const secondBkg = lighten(contrast, 55);
|
||||
export const lineColor = '#666';
|
||||
export const border1 = '#999';
|
||||
export const border2 = contrast;
|
||||
export const note = '#ffa';
|
||||
export const text = '#333';
|
||||
export const critical = '#d42';
|
||||
export const done = '#bbb';
|
||||
export const arrowheadColor = '#333333';
|
||||
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||
export const fontSize = '16px';
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
export const nodeBkg = mainBkg;
|
||||
export const nodeBorder = border1;
|
||||
export const clusterBkg = secondBkg;
|
||||
export const clusterBorder = border2;
|
||||
export const defaultLinkColor = lineColor;
|
||||
export const titleColor = text;
|
||||
export const edgeLabelBackground = 'white';
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
export const actorBorder = border1;
|
||||
export const actorBkg = mainBkg;
|
||||
export const actorTextColor = text;
|
||||
export const actorLineColor = lineColor;
|
||||
export const signalColor = text;
|
||||
export const signalTextColor = text;
|
||||
export const labelBoxBkgColor = actorBkg;
|
||||
export const labelBoxBorderColor = actorBorder;
|
||||
export const labelTextColor = text;
|
||||
export const loopTextColor = text;
|
||||
export const noteBorderColor = darken(note, 60);
|
||||
export const noteBkgColor = note;
|
||||
export const noteTextColor = actorTextColor;
|
||||
export const activationBorderColor = '#666';
|
||||
export const activationBkgColor = '#f4f4f4';
|
||||
export const sequenceNumberColor = 'white';
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
export const sectionBkgColor = lighten(contrast, 30);
|
||||
export const altSectionBkgColor = 'white';
|
||||
export const sectionBkgColor2 = lighten(contrast, 30);
|
||||
export const taskBorderColor = darken(contrast, 10);
|
||||
export const taskBkgColor = contrast;
|
||||
export const taskTextLightColor = 'white';
|
||||
export const taskTextColor = taskTextLightColor;
|
||||
export const taskTextDarkColor = text;
|
||||
export const taskTextOutsideColor = taskTextDarkColor;
|
||||
export const taskTextClickableColor = '#003163';
|
||||
export const activeTaskBorderColor = taskBorderColor;
|
||||
export const activeTaskBkgColor = mainBkg;
|
||||
export const gridColor = lighten(border1, 30);
|
||||
export const doneTaskBkgColor = done;
|
||||
export const doneTaskBorderColor = lineColor;
|
||||
export const critBkgColor = critical;
|
||||
export const critBorderColor = darken(critBkgColor, 10);
|
||||
export const todayLineColor = critBkgColor;
|
||||
|
||||
/* state colors */
|
||||
export const labelColor = 'black';
|
||||
|
||||
export const errorBkgColor = '#552222';
|
||||
export const errorTextColor = '#552222';
|
||||
@ -82,7 +82,7 @@ g.stateGroup line {
|
||||
}
|
||||
|
||||
.statediagram-cluster rect {
|
||||
fill: $nodeBkg;
|
||||
// fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
136
src/themes/theme-base.js
Normal file
136
src/themes/theme-base.js
Normal file
@ -0,0 +1,136 @@
|
||||
import { darken, lighten, adjust } from 'khroma';
|
||||
|
||||
class Theme {
|
||||
constructor() {
|
||||
/* Base variables */
|
||||
this.primaryColor = '#039fbe';
|
||||
this.secondaryColor = '#b20238';
|
||||
this.tertiaryColor = lighten('#e8d21d', 30);
|
||||
this.relationColor = '#000';
|
||||
this.primaryColor = '#fa255e';
|
||||
this.secondaryColor = '#c39ea0';
|
||||
this.tertiaryColor = '#f8e5e5';
|
||||
|
||||
this.primaryColor = '#ECECFF';
|
||||
this.secondaryColor = '#ffffde';
|
||||
this.tertiaryColor = '#ffffde';
|
||||
|
||||
this.background = 'white';
|
||||
this.lineColor = '#333333';
|
||||
this.border1 = '#9370DB';
|
||||
this.arrowheadColor = '#333333';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontSize = '16px';
|
||||
this.labelBackground = '#e8e8e8';
|
||||
this.textColor = '#333';
|
||||
this.noteBkgColor = '#fff5ad';
|
||||
this.noteBorderColor = '#aaaa33';
|
||||
this.updateColors();
|
||||
}
|
||||
updateColors() {
|
||||
this.secondBkg = this.tertiaryColor;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
this.nodeBkg = this.primaryColor;
|
||||
this.mainBkg = this.primaryColor;
|
||||
this.nodeBorder = darken(this.primaryColor, 23); // border 1
|
||||
this.clusterBkg = this.tertiaryColor;
|
||||
this.clusterBorder = darken(this.tertiaryColor, 10);
|
||||
this.defaultLinkColor = this.lineColor;
|
||||
this.titleColor = this.textColor;
|
||||
this.edgeLabelBackground = this.labelBackground;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
// this.actorBorder = lighten(this.border1, 0.5);
|
||||
this.actorBorder = lighten(this.border1, 23);
|
||||
this.actorBkg = this.mainBkg;
|
||||
this.actorTextColor = 'black';
|
||||
this.actorLineColor = 'grey';
|
||||
this.labelBoxBkgColor = this.actorBkg;
|
||||
this.signalColor = this.textColor;
|
||||
this.signalTextColor = this.textColor;
|
||||
this.labelBoxBorderColor = this.actorBorder;
|
||||
this.labelTextColor = this.actorTextColor;
|
||||
this.loopTextColor = this.actorTextColor;
|
||||
this.noteBorderColor = this.border2;
|
||||
this.noteTextColor = this.actorTextColor;
|
||||
this.activationBorderColor = darken(this.secondaryColor, 10);
|
||||
this.activationBkgColor = this.secondaryColor;
|
||||
this.sequenceNumberColor = 'white';
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.taskTextColor = this.taskTextLightColor;
|
||||
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||||
this.sectionBkgColor = this.tertiaryColor;
|
||||
this.altSectionBkgColor = 'white';
|
||||
this.sectionBkgColor = this.secondaryColor;
|
||||
this.sectionBkgColor2 = this.tertiaryColor;
|
||||
this.altSectionBkgColor = 'white';
|
||||
this.sectionBkgColor2 = this.primaryColor;
|
||||
this.taskBorderColor = lighten(this.primaryColor, 23);
|
||||
this.taskBkgColor = this.primaryColor;
|
||||
this.taskTextLightColor = 'white';
|
||||
this.taskTextColor = 'calculated';
|
||||
this.taskTextDarkColor = 'black';
|
||||
this.taskTextOutsideColor = 'calculated';
|
||||
this.taskTextClickableColor = '#003163';
|
||||
this.activeTaskBorderColor = this.primaryColor;
|
||||
this.activeTaskBkgColor = lighten(this.primaryColor, 23);
|
||||
this.gridColor = 'lightgrey';
|
||||
this.doneTaskBkgColor = 'lightgrey';
|
||||
this.doneTaskBorderColor = 'grey';
|
||||
this.critBorderColor = '#ff8888';
|
||||
this.critBkgColor = 'red';
|
||||
this.todayLineColor = 'red';
|
||||
|
||||
/* state colors */
|
||||
this.labelColor = 'black';
|
||||
this.errorBkgColor = '#552222';
|
||||
this.errorTextColor = '#552222';
|
||||
|
||||
/* state colors */
|
||||
|
||||
/* class */
|
||||
this.classText = this.textColor;
|
||||
|
||||
/* user-journey */
|
||||
this.fillType0 = this.primaryColor;
|
||||
this.fillType1 = this.secondaryColor;
|
||||
this.fillType2 = adjust(this.primaryColor, { h: 64 });
|
||||
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
|
||||
this.fillType4 = adjust(this.primaryColor, { h: -64 });
|
||||
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||||
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||||
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
return;
|
||||
}
|
||||
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach(k => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
// Copy values from overrides again in case of an override of derived value
|
||||
keys.forEach(k => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = userOverrides => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
return theme;
|
||||
};
|
||||
159
src/themes/theme-dark.js
Normal file
159
src/themes/theme-dark.js
Normal file
@ -0,0 +1,159 @@
|
||||
import { invert, lighten, darken, rgba, adjust } from 'khroma';
|
||||
|
||||
class Theme {
|
||||
constructor() {
|
||||
this.background = '#333';
|
||||
this.primaryColor = '#1f2020';
|
||||
this.secondaryColor = lighten(this.primaryColor, 16);
|
||||
this.mainBkg = '#1f2020';
|
||||
this.secondBkg = 'calculated';
|
||||
this.mainContrastColor = 'lightgrey';
|
||||
this.darkTextColor = lighten(invert('#323D47'), 10);
|
||||
this.lineColor = 'calculated';
|
||||
this.border1 = '#81B1DB';
|
||||
this.border2 = rgba(255, 255, 255, 0.25);
|
||||
this.arrowheadColor = 'calculated';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontSize = '16px';
|
||||
this.labelBackground = '#181818';
|
||||
this.textColor = '#ccc';
|
||||
/* Flowchart variables */
|
||||
|
||||
this.nodeBkg = 'calculated';
|
||||
this.nodeBorder = 'calculated';
|
||||
this.clusterBkg = 'calculated';
|
||||
this.clusterBorder = 'calculated';
|
||||
this.defaultLinkColor = 'calculated';
|
||||
this.titleColor = '#F9FFFE';
|
||||
this.edgeLabelBackground = 'calculated';
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
this.actorBorder = 'calculated';
|
||||
this.actorBkg = 'calculated';
|
||||
this.actorTextColor = 'calculated';
|
||||
this.actorLineColor = 'calculated';
|
||||
this.signalColor = 'calculated';
|
||||
this.signalTextColor = 'calculated';
|
||||
this.labelBoxBkgColor = 'calculated';
|
||||
this.labelBoxBorderColor = 'calculated';
|
||||
this.labelTextColor = 'calculated';
|
||||
this.loopTextColor = 'calculated';
|
||||
this.noteBorderColor = 'calculated';
|
||||
this.noteBkgColor = '#fff5ad';
|
||||
this.noteTextColor = 'calculated';
|
||||
this.activationBorderColor = 'calculated';
|
||||
this.activationBkgColor = 'calculated';
|
||||
this.sequenceNumberColor = 'black';
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.sectionBkgColor = darken('#EAE8D9', 30);
|
||||
this.altSectionBkgColor = 'calculated';
|
||||
this.sectionBkgColor2 = '#EAE8D9';
|
||||
this.taskBorderColor = rgba(255, 255, 255, 70);
|
||||
this.taskBkgColor = 'calculated';
|
||||
this.taskTextColor = 'calculated';
|
||||
this.taskTextLightColor = 'calculated';
|
||||
this.taskTextOutsideColor = 'calculated';
|
||||
this.taskTextClickableColor = '#003163';
|
||||
this.activeTaskBorderColor = rgba(255, 255, 255, 50);
|
||||
this.activeTaskBkgColor = '#81B1DB';
|
||||
this.gridColor = 'calculated';
|
||||
this.doneTaskBkgColor = 'calculated';
|
||||
this.doneTaskBorderColor = 'grey';
|
||||
this.critBorderColor = '#E83737';
|
||||
this.critBkgColor = '#E83737';
|
||||
this.taskTextDarkColor = 'calculated';
|
||||
this.todayLineColor = '#DB5757';
|
||||
|
||||
/* state colors */
|
||||
this.labelColor = 'calculated';
|
||||
|
||||
this.errorBkgColor = '#a44141';
|
||||
this.errorTextColor = '#ddd';
|
||||
}
|
||||
updateColors() {
|
||||
this.secondBkg = lighten(this.mainBkg, 16);
|
||||
this.lineColor = this.mainContrastColor;
|
||||
this.arrowheadColor = this.mainContrastColor;
|
||||
/* Flowchart variables */
|
||||
|
||||
this.nodeBkg = this.mainBkg;
|
||||
this.nodeBorder = this.border1;
|
||||
this.clusterBkg = this.secondBkg;
|
||||
this.clusterBorder = this.border2;
|
||||
this.defaultLinkColor = this.lineColor;
|
||||
this.edgeLabelBackground = lighten(this.labelBackground, 25);
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
this.actorBorder = this.border1;
|
||||
this.actorBkg = this.mainBkg;
|
||||
this.actorTextColor = this.mainContrastColor;
|
||||
this.actorLineColor = this.mainContrastColor;
|
||||
this.signalColor = this.mainContrastColor;
|
||||
this.signalTextColor = this.mainContrastColor;
|
||||
this.labelBoxBkgColor = this.actorBkg;
|
||||
this.labelBoxBorderColor = this.actorBorder;
|
||||
this.labelTextColor = this.mainContrastColor;
|
||||
this.loopTextColor = this.mainContrastColor;
|
||||
this.noteBorderColor = this.border2;
|
||||
this.noteTextColor = this.mainBkg;
|
||||
this.activationBorderColor = this.border1;
|
||||
this.activationBkgColor = this.secondBkg;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.altSectionBkgColor = this.background;
|
||||
this.taskBkgColor = lighten(this.mainBkg, 23);
|
||||
this.taskTextColor = this.darkTextColor;
|
||||
this.taskTextLightColor = this.mainContrastColor;
|
||||
this.taskTextOutsideColor = this.taskTextLightColor;
|
||||
this.gridColor = this.mainContrastColor;
|
||||
this.doneTaskBkgColor = this.mainContrastColor;
|
||||
this.taskTextDarkColor = this.darkTextColor;
|
||||
|
||||
/* state colors */
|
||||
this.labelColor = this.textColor;
|
||||
this.altBackground = lighten(this.background, 20);
|
||||
|
||||
this.fillType0 = this.primaryColor;
|
||||
this.fillType1 = this.secondaryColor;
|
||||
this.fillType2 = adjust(this.primaryColor, { h: 64 });
|
||||
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
|
||||
this.fillType4 = adjust(this.primaryColor, { h: -64 });
|
||||
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||||
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||||
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||||
/* class */
|
||||
this.classText = this.nodeBorder;
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
return;
|
||||
}
|
||||
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach(k => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
// Copy values from overrides again in case of an override of derived value
|
||||
keys.forEach(k => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = userOverrides => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
return theme;
|
||||
};
|
||||
165
src/themes/theme-default.js
Normal file
165
src/themes/theme-default.js
Normal file
@ -0,0 +1,165 @@
|
||||
import { lighten, rgba, adjust } from 'khroma';
|
||||
|
||||
class Theme {
|
||||
constructor() {
|
||||
/* Base variables */
|
||||
this.primaryColor = '#ECECFF';
|
||||
this.secondaryColor = '#ffffde';
|
||||
this.background = 'white';
|
||||
this.mainBkg = '#ECECFF';
|
||||
this.secondBkg = '#ffffde';
|
||||
this.lineColor = '#333333';
|
||||
this.border1 = '#9370DB';
|
||||
this.border2 = '#aaaa33';
|
||||
this.arrowheadColor = '#333333';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontSize = '16px';
|
||||
this.labelBackground = '#e8e8e8';
|
||||
this.textColor = '#333';
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
this.nodeBkg = 'calculated';
|
||||
this.nodeBorder = 'calculated';
|
||||
this.clusterBkg = 'calculated';
|
||||
this.clusterBorder = 'calculated';
|
||||
this.defaultLinkColor = 'calculated';
|
||||
this.titleColor = 'calculated';
|
||||
this.edgeLabelBackground = 'calculated';
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
this.actorBorder = 'calculated';
|
||||
this.actorBkg = 'calculated';
|
||||
this.actorTextColor = 'black';
|
||||
this.actorLineColor = 'grey';
|
||||
this.signalColor = 'calculated';
|
||||
this.signalTextColor = 'calculated';
|
||||
this.labelBoxBkgColor = 'calculated';
|
||||
this.labelBoxBorderColor = 'calculated';
|
||||
this.labelTextColor = 'calculated';
|
||||
this.loopTextColor = 'calculated';
|
||||
this.noteBorderColor = 'calculated';
|
||||
this.noteBkgColor = '#fff5ad';
|
||||
this.noteTextColor = 'calculated';
|
||||
this.activationBorderColor = '#666';
|
||||
this.activationBkgColor = '#f4f4f4';
|
||||
this.sequenceNumberColor = 'white';
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.sectionBkgColor = 'calculated';
|
||||
this.altSectionBkgColor = 'calculated';
|
||||
this.sectionBkgColor2 = 'calculated';
|
||||
this.taskBorderColor = 'calculated';
|
||||
this.taskBkgColor = 'calculated';
|
||||
this.taskTextLightColor = 'calculated';
|
||||
this.taskTextColor = this.taskTextLightColor;
|
||||
this.taskTextDarkColor = 'calculated';
|
||||
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||||
this.taskTextClickableColor = 'calculated';
|
||||
this.activeTaskBorderColor = 'calculated';
|
||||
this.activeTaskBkgColor = 'calculated';
|
||||
this.gridColor = 'calculated';
|
||||
this.doneTaskBkgColor = 'calculated';
|
||||
this.doneTaskBorderColor = 'calculated';
|
||||
this.critBorderColor = 'calculated';
|
||||
this.critBkgColor = 'calculated';
|
||||
this.todayLineColor = 'calculated';
|
||||
|
||||
this.sectionBkgColor = rgba(102, 102, 255, 0.49);
|
||||
this.altSectionBkgColor = 'white';
|
||||
this.sectionBkgColor2 = '#fff400';
|
||||
this.taskBorderColor = '#534fbc';
|
||||
this.taskBkgColor = '#8a90dd';
|
||||
this.taskTextLightColor = 'white';
|
||||
this.taskTextColor = 'calculated';
|
||||
this.taskTextDarkColor = 'black';
|
||||
this.taskTextOutsideColor = 'calculated';
|
||||
this.taskTextClickableColor = '#003163';
|
||||
this.activeTaskBorderColor = '#534fbc';
|
||||
this.activeTaskBkgColor = '#bfc7ff';
|
||||
this.gridColor = 'lightgrey';
|
||||
this.doneTaskBkgColor = 'lightgrey';
|
||||
this.doneTaskBorderColor = 'grey';
|
||||
this.critBorderColor = '#ff8888';
|
||||
this.critBkgColor = 'red';
|
||||
this.todayLineColor = 'red';
|
||||
|
||||
/* state colors */
|
||||
this.labelColor = 'black';
|
||||
this.errorBkgColor = '#552222';
|
||||
this.errorTextColor = '#552222';
|
||||
this.updateColors();
|
||||
}
|
||||
updateColors() {
|
||||
/* Flowchart variables */
|
||||
|
||||
this.nodeBkg = this.mainBkg;
|
||||
this.nodeBorder = this.border1; // border 1
|
||||
this.clusterBkg = this.secondBkg;
|
||||
this.clusterBorder = this.border2;
|
||||
this.defaultLinkColor = this.lineColor;
|
||||
this.titleColor = this.textColor;
|
||||
this.edgeLabelBackground = this.labelBackground;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
// this.actorBorder = lighten(this.border1, 0.5);
|
||||
this.actorBorder = lighten(this.border1, 23);
|
||||
this.actorBkg = this.mainBkg;
|
||||
this.labelBoxBkgColor = this.actorBkg;
|
||||
this.signalColor = this.textColor;
|
||||
this.signalTextColor = this.textColor;
|
||||
this.labelBoxBorderColor = this.actorBorder;
|
||||
this.labelTextColor = this.actorTextColor;
|
||||
this.loopTextColor = this.actorTextColor;
|
||||
this.noteBorderColor = this.border2;
|
||||
this.noteTextColor = this.actorTextColor;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.taskTextColor = this.taskTextLightColor;
|
||||
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||||
|
||||
/* state colors */
|
||||
/* class */
|
||||
this.classText = this.nodeBorder;
|
||||
/* journey */
|
||||
this.fillType0 = this.primaryColor;
|
||||
this.fillType1 = this.secondaryColor;
|
||||
this.fillType2 = adjust(this.primaryColor, { h: 64 });
|
||||
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
|
||||
this.fillType4 = adjust(this.primaryColor, { h: -64 });
|
||||
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||||
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||||
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
return;
|
||||
}
|
||||
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach(k => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
// Copy values from overrides again in case of an override of derived value
|
||||
keys.forEach(k => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = userOverrides => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
return theme;
|
||||
};
|
||||
140
src/themes/theme-forest.js
Normal file
140
src/themes/theme-forest.js
Normal file
@ -0,0 +1,140 @@
|
||||
import { darken, adjust } from 'khroma';
|
||||
class Theme {
|
||||
constructor() {
|
||||
/* Base vales */
|
||||
this.primaryColor = '#cde498';
|
||||
this.secondaryColor = '#cdffb2';
|
||||
this.background = 'white';
|
||||
this.mainBkg = '#cde498';
|
||||
this.secondBkg = '#cdffb2';
|
||||
this.lineColor = 'green';
|
||||
this.border1 = '#13540c';
|
||||
this.border2 = '#6eaa49';
|
||||
this.arrowheadColor = 'green';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontSize = '16px';
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
this.nodeBkg = 'calculated';
|
||||
this.nodeBorder = 'calculated';
|
||||
this.clusterBkg = 'calculated';
|
||||
this.clusterBorder = 'calculated';
|
||||
this.defaultLinkColor = 'calculated';
|
||||
this.titleColor = '#333';
|
||||
this.edgeLabelBackground = '#e8e8e8';
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
this.actorBorder = 'calculated';
|
||||
this.actorBkg = 'calculated';
|
||||
this.actorTextColor = 'black';
|
||||
this.actorLineColor = 'grey';
|
||||
this.signalColor = '#333';
|
||||
this.signalTextColor = '#333';
|
||||
this.labelBoxBkgColor = 'calculated';
|
||||
this.labelBoxBorderColor = '#326932';
|
||||
this.labelTextColor = 'calculated';
|
||||
this.loopTextColor = 'calculated';
|
||||
this.noteBorderColor = 'calculated';
|
||||
this.noteBkgColor = '#fff5ad';
|
||||
this.noteTextColor = 'calculated';
|
||||
this.activationBorderColor = '#666';
|
||||
this.activationBkgColor = '#f4f4f4';
|
||||
this.sequenceNumberColor = 'white';
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.sectionBkgColor = '#6eaa49';
|
||||
this.altSectionBkgColor = 'white';
|
||||
this.sectionBkgColor2 = '#6eaa49';
|
||||
this.taskBorderColor = 'calculated';
|
||||
this.taskBkgColor = '#487e3a';
|
||||
this.taskTextLightColor = 'white';
|
||||
this.taskTextColor = 'calculated';
|
||||
this.taskTextDarkColor = 'black';
|
||||
this.taskTextOutsideColor = 'calculated';
|
||||
this.taskTextClickableColor = '#003163';
|
||||
this.activeTaskBorderColor = 'calculated';
|
||||
this.activeTaskBkgColor = 'calculated';
|
||||
this.gridColor = 'lightgrey';
|
||||
this.doneTaskBkgColor = 'lightgrey';
|
||||
this.doneTaskBorderColor = 'grey';
|
||||
this.critBorderColor = '#ff8888';
|
||||
this.critBkgColor = 'red';
|
||||
this.todayLineColor = 'red';
|
||||
|
||||
/* state colors */
|
||||
this.labelColor = 'black';
|
||||
|
||||
this.errorBkgColor = '#552222';
|
||||
this.errorTextColor = '#552222';
|
||||
}
|
||||
updateColors() {
|
||||
/* Flowchart variables */
|
||||
|
||||
this.nodeBkg = this.mainBkg;
|
||||
this.nodeBorder = this.border1;
|
||||
this.clusterBkg = this.secondBkg;
|
||||
this.clusterBorder = this.border2;
|
||||
this.defaultLinkColor = this.lineColor;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
this.actorBorder = darken(this.mainBkg, 20);
|
||||
this.actorBkg = this.mainBkg;
|
||||
this.labelBoxBkgColor = this.actorBkg;
|
||||
this.labelTextColor = this.actorTextColor;
|
||||
this.loopTextColor = this.actorTextColor;
|
||||
this.noteBorderColor = this.border2;
|
||||
this.noteTextColor = this.actorTextColor;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.taskBorderColor = this.border1;
|
||||
this.taskTextColor = this.taskTextLightColor;
|
||||
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||||
this.activeTaskBorderColor = this.taskBorderColor;
|
||||
this.activeTaskBkgColor = this.mainBkg;
|
||||
|
||||
/* state colors */
|
||||
/* class */
|
||||
this.classText = this.nodeBorder;
|
||||
/* journey */
|
||||
this.fillType0 = this.primaryColor;
|
||||
this.fillType1 = this.secondaryColor;
|
||||
this.fillType2 = adjust(this.primaryColor, { h: 64 });
|
||||
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
|
||||
this.fillType4 = adjust(this.primaryColor, { h: -64 });
|
||||
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||||
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||||
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
return;
|
||||
}
|
||||
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach(k => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
// Copy values from overrides again in case of an override of derived value
|
||||
keys.forEach(k => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = userOverrides => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
return theme;
|
||||
};
|
||||
173
src/themes/theme-neutral.js
Normal file
173
src/themes/theme-neutral.js
Normal file
@ -0,0 +1,173 @@
|
||||
import { darken, lighten, adjust } from 'khroma';
|
||||
|
||||
// const Color = require ( 'khroma/dist/color' ).default
|
||||
// Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
|
||||
|
||||
class Theme {
|
||||
constructor() {
|
||||
this.primaryColor = '#eee';
|
||||
this.contrast = '#26a';
|
||||
this.secondaryColor = lighten(this.contrast, 55);
|
||||
this.background = 'white';
|
||||
this.mainBkg = '#eee';
|
||||
this.secondBkg = 'calculated';
|
||||
this.lineColor = '#666';
|
||||
this.border1 = '#999';
|
||||
this.border2 = 'calculated';
|
||||
this.note = '#ffa';
|
||||
this.text = '#333';
|
||||
this.critical = '#d42';
|
||||
this.done = '#bbb';
|
||||
this.arrowheadColor = '#333333';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontSize = '16px';
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
this.nodeBkg = 'calculated';
|
||||
this.nodeBorder = 'calculated';
|
||||
this.clusterBkg = 'calculated';
|
||||
this.clusterBorder = 'calculated';
|
||||
this.defaultLinkColor = 'calculated';
|
||||
this.titleColor = 'calculated';
|
||||
this.edgeLabelBackground = 'white';
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
this.actorBorder = 'calculated';
|
||||
this.actorBkg = 'calculated';
|
||||
this.actorTextColor = 'calculated';
|
||||
this.actorLineColor = 'calculated';
|
||||
this.signalColor = 'calculated';
|
||||
this.signalTextColor = 'calculated';
|
||||
this.labelBoxBkgColor = 'calculated';
|
||||
this.labelBoxBorderColor = 'calculated';
|
||||
this.labelTextColor = 'calculated';
|
||||
this.loopTextColor = 'calculated';
|
||||
this.noteBorderColor = 'calculated';
|
||||
this.noteBkgColor = 'calculated';
|
||||
this.noteTextColor = 'calculated';
|
||||
this.activationBorderColor = '#666';
|
||||
this.activationBkgColor = '#f4f4f4';
|
||||
this.sequenceNumberColor = 'white';
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.sectionBkgColor = 'calculated';
|
||||
this.altSectionBkgColor = 'white';
|
||||
this.sectionBkgColor2 = 'calculated';
|
||||
this.taskBorderColor = 'calculated';
|
||||
this.taskBkgColor = 'calculated';
|
||||
this.taskTextLightColor = 'white';
|
||||
this.taskTextColor = 'calculated';
|
||||
this.taskTextDarkColor = 'calculated';
|
||||
this.taskTextOutsideColor = 'calculated';
|
||||
this.taskTextClickableColor = '#003163';
|
||||
this.activeTaskBorderColor = 'calculated';
|
||||
this.activeTaskBkgColor = 'calculated';
|
||||
this.gridColor = 'calculated';
|
||||
this.doneTaskBkgColor = 'calculated';
|
||||
this.doneTaskBorderColor = 'calculated';
|
||||
this.critBkgColor = 'calculated';
|
||||
this.critBorderColor = 'calculated';
|
||||
this.todayLineColor = 'calculated';
|
||||
|
||||
/* state colors */
|
||||
this.labelColor = 'black';
|
||||
|
||||
this.errorBkgColor = '#552222';
|
||||
this.errorTextColor = '#552222';
|
||||
}
|
||||
updateColors() {
|
||||
this.secondBkg = lighten(this.contrast, 55);
|
||||
this.border2 = this.contrast;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
this.nodeBkg = this.mainBkg;
|
||||
this.nodeBorder = this.border1;
|
||||
this.clusterBkg = this.secondBkg;
|
||||
this.clusterBorder = this.border2;
|
||||
this.defaultLinkColor = this.lineColor;
|
||||
this.titleColor = this.text;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
this.actorBorder = lighten(this.border1, 23);
|
||||
this.actorBkg = this.mainBkg;
|
||||
this.actorTextColor = this.text;
|
||||
this.actorLineColor = this.lineColor;
|
||||
this.signalColor = this.text;
|
||||
this.signalTextColor = this.text;
|
||||
this.labelBoxBkgColor = this.actorBkg;
|
||||
this.labelBoxBorderColor = this.actorBorder;
|
||||
this.labelTextColor = this.text;
|
||||
this.loopTextColor = this.text;
|
||||
this.noteBorderColor = darken(this.note, 60);
|
||||
this.noteBkgColor = this.note;
|
||||
this.noteTextColor = this.actorTextColor;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.sectionBkgColor = lighten(this.contrast, 30);
|
||||
this.sectionBkgColor2 = lighten(this.contrast, 30);
|
||||
|
||||
this.taskBorderColor = darken(this.contrast, 10);
|
||||
|
||||
this.taskBkgColor = this.contrast;
|
||||
this.taskTextColor = this.taskTextLightColor;
|
||||
this.taskTextDarkColor = this.text;
|
||||
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||||
this.activeTaskBorderColor = this.taskBorderColor;
|
||||
this.activeTaskBkgColor = this.mainBkg;
|
||||
this.gridColor = lighten(this.border1, 30);
|
||||
|
||||
this.doneTaskBkgColor = this.done;
|
||||
this.doneTaskBorderColor = this.lineColor;
|
||||
this.critBkgColor = this.critical;
|
||||
this.critBorderColor = darken(this.critBkgColor, 10);
|
||||
|
||||
this.todayLineColor = this.critBkgColor;
|
||||
|
||||
/* state colors */
|
||||
/* class */
|
||||
this.classText = this.nodeBorder;
|
||||
/* journey */
|
||||
this.fillType0 = this.primaryColor;
|
||||
this.fillType1 = this.secondaryColor;
|
||||
this.fillType2 = adjust(this.primaryColor, { h: 64 });
|
||||
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
|
||||
this.fillType4 = adjust(this.primaryColor, { h: -64 });
|
||||
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||||
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||||
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
return;
|
||||
}
|
||||
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach(k => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
// Copy values from overrides again in case of an override of derived value
|
||||
keys.forEach(k => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = userOverrides => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
console.info('Theme', userOverrides, theme);
|
||||
return theme;
|
||||
};
|
||||
@ -343,7 +343,7 @@ const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition)
|
||||
const distanceToCardinalityPoint = 25;
|
||||
|
||||
let remainingDistance = distanceToCardinalityPoint;
|
||||
let center = { x: 0, y: 0 };
|
||||
let center;
|
||||
prevPoint = undefined;
|
||||
points.forEach(point => {
|
||||
if (prevPoint && !center) {
|
||||
|
||||
@ -2890,6 +2890,14 @@ color@3.0.x:
|
||||
color-convert "^1.9.1"
|
||||
color-string "^1.5.2"
|
||||
|
||||
color@^3.1.2:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
|
||||
integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
|
||||
dependencies:
|
||||
color-convert "^1.9.1"
|
||||
color-string "^1.5.2"
|
||||
|
||||
colornames@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/colornames/-/colornames-1.1.1.tgz#f8889030685c7c4ff9e2a559f5077eb76a816f96"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user