mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-18 19:54:17 +01:00
Tyler Long
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,5 +1,4 @@
|
|||||||
node_modules
|
node_modules
|
||||||
#dist
|
|
||||||
bower_components
|
bower_components
|
||||||
|
|
||||||
*.sublime-project
|
*.sublime-project
|
||||||
@@ -13,3 +12,4 @@ test/tmp_*
|
|||||||
test/fixtures/samples/*.actual*
|
test/fixtures/samples/*.actual*
|
||||||
|
|
||||||
dist/*.js
|
dist/*.js
|
||||||
|
dist/*.css
|
||||||
|
|||||||
32
.travis.yml
32
.travis.yml
@@ -1,21 +1,23 @@
|
|||||||
language: node_js
|
sudo: required
|
||||||
osx_image: xcode8.1
|
dist: xenial
|
||||||
os:
|
|
||||||
- linux
|
|
||||||
- osx
|
|
||||||
sudo: false
|
|
||||||
node_js:
|
|
||||||
- "6.9"
|
|
||||||
- "7.9"
|
|
||||||
env:
|
|
||||||
- CXX=g++-4.8
|
|
||||||
addons:
|
addons:
|
||||||
code_climate:
|
|
||||||
repo_token: e87e6bf1c253e0555437ebd23235fdfe2749b889358e7c6d100e4ea5b4f2e091
|
|
||||||
apt:
|
apt:
|
||||||
sources:
|
sources:
|
||||||
- ubuntu-toolchain-r-test
|
- google-chrome
|
||||||
packages:
|
packages:
|
||||||
- g++-4.8
|
- google-chrome-stable
|
||||||
|
code_climate:
|
||||||
|
repo_token: e87e6bf1c253e0555437ebd23235fdfe2749b889358e7c6d100e4ea5b4f2e091
|
||||||
|
language: node_js
|
||||||
|
node_js:
|
||||||
|
- "6"
|
||||||
|
- "7"
|
||||||
|
before_install:
|
||||||
|
- export DISPLAY=:99.0
|
||||||
|
- sh -e /etc/init.d/xvfb start
|
||||||
|
before_script:
|
||||||
|
- yarn build
|
||||||
|
script:
|
||||||
|
- yarn test
|
||||||
after_script:
|
after_script:
|
||||||
- cat coverage/lcov.info | codeclimate
|
- cat coverage/lcov.info | codeclimate
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ Some important guidlines:
|
|||||||
|
|
||||||
The issue list and the items marked with **help wanted** is a good starting point if you want to do some work.
|
The issue list and the items marked with **help wanted** is a good starting point if you want to do some work.
|
||||||
|
|
||||||
|
|
||||||
## Guidelines for avoiding duplicate work
|
## Guidelines for avoiding duplicate work
|
||||||
|
|
||||||
Contributing is great. It is not so fun when you are done with your issue and just before you're about to push your
|
Contributing is great. It is not so fun when you are done with your issue and just before you're about to push your
|
||||||
@@ -26,6 +27,7 @@ place to prevent this:
|
|||||||
|
|
||||||
|
|
||||||
## Submitting changes
|
## Submitting changes
|
||||||
|
|
||||||
Please send a GitHub Pull Request with a clear list of what you've done (read more about pull requests). When you send
|
Please send a GitHub Pull Request with a clear list of what you've done (read more about pull requests). When you send
|
||||||
a pull request, we will love you forever if you include jasmine tests. We can always use more test coverage.
|
a pull request, we will love you forever if you include jasmine tests. We can always use more test coverage.
|
||||||
|
|
||||||
@@ -47,6 +49,7 @@ Also for the CDN, always use cwd-relative paths rather than root-relative paths
|
|||||||
url('/images/blah.gif'), use url('../images/blah.gif').
|
url('/images/blah.gif'), use url('../images/blah.gif').
|
||||||
|
|
||||||
# Build instructions
|
# Build instructions
|
||||||
|
|
||||||
Fork, then:
|
Fork, then:
|
||||||
|
|
||||||
```
|
```
|
||||||
@@ -63,14 +66,23 @@ for instance:
|
|||||||
```
|
```
|
||||||
gulp jison
|
gulp jison
|
||||||
```
|
```
|
||||||
|
|
||||||
|
To build:
|
||||||
|
|
||||||
|
```
|
||||||
|
yarn build
|
||||||
|
```
|
||||||
|
|
||||||
To run the tests:
|
To run the tests:
|
||||||
|
|
||||||
```
|
```
|
||||||
yarn run karma
|
yarn test
|
||||||
```
|
```
|
||||||
|
|
||||||
To build the /dist directory
|
Make sure you have Chrome browser installed. We use Chrome headless for testing.
|
||||||
```
|
|
||||||
yarn run dist
|
|
||||||
```
|
|
||||||
|
|
||||||
Thanks, Knut Sveidqvist
|
Manual test:
|
||||||
|
|
||||||
|
```
|
||||||
|
open dist/demo/index.html
|
||||||
|
```
|
||||||
|
|||||||
61
README.md
61
README.md
@@ -1,6 +1,6 @@
|
|||||||
mermaid [](https://travis-ci.org/knsv/mermaid) [](https://codeclimate.com/github/knsv/mermaid)
|
# mermaid [](https://travis-ci.org/knsv/mermaid)
|
||||||
=======
|
|
||||||
|
|
||||||
|
[](https://codeclimate.com/github/knsv/mermaid)
|
||||||
[](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
[](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||||
|
|
||||||
Generation of diagrams and flowcharts from text in a similar manner as markdown.
|
Generation of diagrams and flowcharts from text in a similar manner as markdown.
|
||||||
@@ -108,6 +108,7 @@ end
|
|||||||
|
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
## Further reading
|
## Further reading
|
||||||
|
|
||||||
* [Usage](http://knsv.github.io/mermaid/#usage)
|
* [Usage](http://knsv.github.io/mermaid/#usage)
|
||||||
@@ -116,6 +117,7 @@ end
|
|||||||
* [Mermaid client](http://knsv.github.io/mermaid/#mermaid-cli)
|
* [Mermaid client](http://knsv.github.io/mermaid/#mermaid-cli)
|
||||||
* [Demos](http://knsv.github.io/mermaid/#demos)
|
* [Demos](http://knsv.github.io/mermaid/#demos)
|
||||||
|
|
||||||
|
|
||||||
# Request for assistance
|
# Request for assistance
|
||||||
|
|
||||||
Things are piling up and I have hard time keeping up. To remedy this
|
Things are piling up and I have hard time keeping up. To remedy this
|
||||||
@@ -134,11 +136,58 @@ Together we could continue the work with things like:
|
|||||||
|
|
||||||
Don't hesitate to contact me if you want to get involved.
|
Don't hesitate to contact me if you want to get involved.
|
||||||
|
|
||||||
|
|
||||||
|
# For contributors
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Make sure you have Chrome browser installed, this project uses Chrome headless to running tests.
|
||||||
|
|
||||||
|
yarn install
|
||||||
|
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
yarn build
|
||||||
|
|
||||||
|
If you want real time incremental build:
|
||||||
|
|
||||||
|
yarn watch
|
||||||
|
|
||||||
|
|
||||||
|
## Lint
|
||||||
|
|
||||||
|
yarn lint
|
||||||
|
|
||||||
|
We use [JavaScript Standard Style](https://github.com/feross/standard).
|
||||||
|
We recommend you installing [editor plugins](https://github.com/feross/standard#are-there-text-editor-plugins) so you can get real time lint result.
|
||||||
|
|
||||||
|
|
||||||
|
## Test
|
||||||
|
|
||||||
|
yarn test
|
||||||
|
|
||||||
|
Manual test in browser:
|
||||||
|
|
||||||
|
open dist/demo/index.html
|
||||||
|
|
||||||
|
Manual test in Node.js:
|
||||||
|
|
||||||
|
node dist/demo/index.js
|
||||||
|
|
||||||
|
|
||||||
|
## Distribtion
|
||||||
|
|
||||||
|
yarn dist
|
||||||
|
|
||||||
|
Command above generates files into the `dist` folder, then you can publish them to npmjs.org.
|
||||||
|
|
||||||
|
|
||||||
# Credits
|
# Credits
|
||||||
Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing
|
|
||||||
the graphical layout and drawing libraries! Thanks also to the
|
Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!
|
||||||
[js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the
|
|
||||||
sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.
|
Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.
|
||||||
|
|
||||||
*Mermaid was created by Knut Sveidqvist for easier documentation.*
|
*Mermaid was created by Knut Sveidqvist for easier documentation.*
|
||||||
|
|
||||||
|
|||||||
@@ -3,14 +3,16 @@
|
|||||||
"authors": [
|
"authors": [
|
||||||
"knsv <knut@sveido.com>"
|
"knsv <knut@sveido.com>"
|
||||||
],
|
],
|
||||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.",
|
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||||
"main": "dist/mermaid.slim.js",
|
"main": "dist/mermaid.slim.js",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"diagram",
|
"diagram",
|
||||||
"markdown",
|
"markdown",
|
||||||
"flowchart",
|
"flowchart",
|
||||||
"sequence diagram",
|
"sequence diagram",
|
||||||
"gantt"
|
"gantt",
|
||||||
|
"class diagram",
|
||||||
|
"git graph"
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"ignore": [
|
"ignore": [
|
||||||
|
|||||||
7
dist/demo/index.html
vendored
7
dist/demo/index.html
vendored
@@ -5,7 +5,7 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<title>Mermaid Quick Test Page</title>
|
<title>Mermaid Quick Test Page</title>
|
||||||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
|
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
|
||||||
<link rel="stylesheet" href="../mermaid.forest.css">
|
<link rel="stylesheet" href="../mermaid.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="mermaid">
|
<div class="mermaid">
|
||||||
@@ -65,9 +65,8 @@ Add another diagram to demo page : 48h
|
|||||||
gitGraph :
|
gitGraph :
|
||||||
options
|
options
|
||||||
{
|
{
|
||||||
"key": "value",
|
"nodeSpacing" : 150,
|
||||||
"nodeWidth": 150,
|
"nodeRadius": 10
|
||||||
"nodeSpacing" : 150
|
|
||||||
}
|
}
|
||||||
end
|
end
|
||||||
commit
|
commit
|
||||||
|
|||||||
273
dist/mermaid.css
vendored
273
dist/mermaid.css
vendored
@@ -1,273 +0,0 @@
|
|||||||
/* Flowchart variables */
|
|
||||||
/* Sequence Diagram variables */
|
|
||||||
/* Gantt chart variables */
|
|
||||||
.mermaid .label {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.node rect,
|
|
||||||
.node circle,
|
|
||||||
.node ellipse,
|
|
||||||
.node polygon {
|
|
||||||
fill: #ECECFF;
|
|
||||||
stroke: #CCCCFF;
|
|
||||||
stroke-width: 1px;
|
|
||||||
}
|
|
||||||
.edgePath .path {
|
|
||||||
stroke: #333333;
|
|
||||||
}
|
|
||||||
.edgeLabel {
|
|
||||||
background-color: #e8e8e8;
|
|
||||||
}
|
|
||||||
.cluster rect {
|
|
||||||
fill: #ffffde !important;
|
|
||||||
rx: 4 !important;
|
|
||||||
stroke: #aaaa33 !important;
|
|
||||||
stroke-width: 1px !important;
|
|
||||||
}
|
|
||||||
.cluster text {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
.actor {
|
|
||||||
stroke: #CCCCFF;
|
|
||||||
fill: #ECECFF;
|
|
||||||
}
|
|
||||||
text.actor {
|
|
||||||
fill: black;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.actor-line {
|
|
||||||
stroke: grey;
|
|
||||||
}
|
|
||||||
.messageLine0 {
|
|
||||||
stroke-width: 1.5;
|
|
||||||
stroke-dasharray: "2 2";
|
|
||||||
marker-end: "url(#arrowhead)";
|
|
||||||
stroke: #333;
|
|
||||||
}
|
|
||||||
.messageLine1 {
|
|
||||||
stroke-width: 1.5;
|
|
||||||
stroke-dasharray: "2 2";
|
|
||||||
stroke: #333;
|
|
||||||
}
|
|
||||||
#arrowhead {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
#crosshead path {
|
|
||||||
fill: #333 !important;
|
|
||||||
stroke: #333 !important;
|
|
||||||
}
|
|
||||||
.messageText {
|
|
||||||
fill: #333;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.labelBox {
|
|
||||||
stroke: #CCCCFF;
|
|
||||||
fill: #ECECFF;
|
|
||||||
}
|
|
||||||
.labelText {
|
|
||||||
fill: black;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.loopText {
|
|
||||||
fill: black;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.loopLine {
|
|
||||||
stroke-width: 2;
|
|
||||||
stroke-dasharray: "2 2";
|
|
||||||
marker-end: "url(#arrowhead)";
|
|
||||||
stroke: #CCCCFF;
|
|
||||||
}
|
|
||||||
.note {
|
|
||||||
stroke: #aaaa33;
|
|
||||||
fill: #fff5ad;
|
|
||||||
}
|
|
||||||
.noteText {
|
|
||||||
fill: black;
|
|
||||||
stroke: none;
|
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
/** Section styling */
|
|
||||||
.section {
|
|
||||||
stroke: none;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
.section0 {
|
|
||||||
fill: rgba(102, 102, 255, 0.49);
|
|
||||||
}
|
|
||||||
.section2 {
|
|
||||||
fill: #fff400;
|
|
||||||
}
|
|
||||||
.section1,
|
|
||||||
.section3 {
|
|
||||||
fill: white;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
.sectionTitle0 {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
.sectionTitle1 {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
.sectionTitle2 {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
.sectionTitle3 {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
.sectionTitle {
|
|
||||||
text-anchor: start;
|
|
||||||
font-size: 11px;
|
|
||||||
text-height: 14px;
|
|
||||||
}
|
|
||||||
/* Grid and axis */
|
|
||||||
.grid .tick {
|
|
||||||
stroke: lightgrey;
|
|
||||||
opacity: 0.3;
|
|
||||||
shape-rendering: crispEdges;
|
|
||||||
}
|
|
||||||
.grid path {
|
|
||||||
stroke-width: 0;
|
|
||||||
}
|
|
||||||
/* Today line */
|
|
||||||
.today {
|
|
||||||
fill: none;
|
|
||||||
stroke: red;
|
|
||||||
stroke-width: 2px;
|
|
||||||
}
|
|
||||||
/* Task styling */
|
|
||||||
/* Default task */
|
|
||||||
.task {
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.taskText {
|
|
||||||
text-anchor: middle;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
.taskTextOutsideRight {
|
|
||||||
fill: black;
|
|
||||||
text-anchor: start;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
.taskTextOutsideLeft {
|
|
||||||
fill: black;
|
|
||||||
text-anchor: end;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
/* Specific task settings for the sections*/
|
|
||||||
.taskText0,
|
|
||||||
.taskText1,
|
|
||||||
.taskText2,
|
|
||||||
.taskText3 {
|
|
||||||
fill: white;
|
|
||||||
}
|
|
||||||
.task0,
|
|
||||||
.task1,
|
|
||||||
.task2,
|
|
||||||
.task3 {
|
|
||||||
fill: #8a90dd;
|
|
||||||
stroke: #534fbc;
|
|
||||||
}
|
|
||||||
.taskTextOutside0,
|
|
||||||
.taskTextOutside2 {
|
|
||||||
fill: black;
|
|
||||||
}
|
|
||||||
.taskTextOutside1,
|
|
||||||
.taskTextOutside3 {
|
|
||||||
fill: black;
|
|
||||||
}
|
|
||||||
/* Active task */
|
|
||||||
.active0,
|
|
||||||
.active1,
|
|
||||||
.active2,
|
|
||||||
.active3 {
|
|
||||||
fill: #bfc7ff;
|
|
||||||
stroke: #534fbc;
|
|
||||||
}
|
|
||||||
.activeText0,
|
|
||||||
.activeText1,
|
|
||||||
.activeText2,
|
|
||||||
.activeText3 {
|
|
||||||
fill: black !important;
|
|
||||||
}
|
|
||||||
/* Completed task */
|
|
||||||
.done0,
|
|
||||||
.done1,
|
|
||||||
.done2,
|
|
||||||
.done3 {
|
|
||||||
stroke: grey;
|
|
||||||
fill: lightgrey;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.doneText0,
|
|
||||||
.doneText1,
|
|
||||||
.doneText2,
|
|
||||||
.doneText3 {
|
|
||||||
fill: black !important;
|
|
||||||
}
|
|
||||||
/* Tasks on the critical line */
|
|
||||||
.crit0,
|
|
||||||
.crit1,
|
|
||||||
.crit2,
|
|
||||||
.crit3 {
|
|
||||||
stroke: #ff8888;
|
|
||||||
fill: red;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.activeCrit0,
|
|
||||||
.activeCrit1,
|
|
||||||
.activeCrit2,
|
|
||||||
.activeCrit3 {
|
|
||||||
stroke: #ff8888;
|
|
||||||
fill: #bfc7ff;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.doneCrit0,
|
|
||||||
.doneCrit1,
|
|
||||||
.doneCrit2,
|
|
||||||
.doneCrit3 {
|
|
||||||
stroke: #ff8888;
|
|
||||||
fill: lightgrey;
|
|
||||||
stroke-width: 2;
|
|
||||||
cursor: pointer;
|
|
||||||
shape-rendering: crispEdges;
|
|
||||||
}
|
|
||||||
.doneCritText0,
|
|
||||||
.doneCritText1,
|
|
||||||
.doneCritText2,
|
|
||||||
.doneCritText3 {
|
|
||||||
fill: black !important;
|
|
||||||
}
|
|
||||||
.activeCritText0,
|
|
||||||
.activeCritText1,
|
|
||||||
.activeCritText2,
|
|
||||||
.activeCritText3 {
|
|
||||||
fill: black !important;
|
|
||||||
}
|
|
||||||
.titleText {
|
|
||||||
text-anchor: middle;
|
|
||||||
font-size: 18px;
|
|
||||||
fill: black;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
|
|
||||||
|
|
||||||
*/
|
|
||||||
.node text {
|
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
div.mermaidTooltip {
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 200px;
|
|
||||||
padding: 2px;
|
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
|
||||||
font-size: 12px;
|
|
||||||
background: #ffffde;
|
|
||||||
border: 1px solid #aaaa33;
|
|
||||||
border-radius: 2px;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
275
dist/mermaid.dark.css
vendored
275
dist/mermaid.dark.css
vendored
@@ -1,275 +0,0 @@
|
|||||||
/* Flowchart variables */
|
|
||||||
/* Sequence Diagram variables */
|
|
||||||
/* Gantt chart variables */
|
|
||||||
.mermaid .label {
|
|
||||||
color: #323D47;
|
|
||||||
}
|
|
||||||
.node rect,
|
|
||||||
.node circle,
|
|
||||||
.node ellipse,
|
|
||||||
.node polygon {
|
|
||||||
fill: #BDD5EA;
|
|
||||||
stroke: #81B1DB;
|
|
||||||
stroke-width: 1px;
|
|
||||||
}
|
|
||||||
.edgePath .path {
|
|
||||||
stroke: lightgrey;
|
|
||||||
}
|
|
||||||
.edgeLabel {
|
|
||||||
background-color: #e8e8e8;
|
|
||||||
}
|
|
||||||
.cluster rect {
|
|
||||||
fill: #6D6D65 !important;
|
|
||||||
rx: 4 !important;
|
|
||||||
stroke: rgba(255, 255, 255, 0.25) !important;
|
|
||||||
stroke-width: 1px !important;
|
|
||||||
}
|
|
||||||
.cluster text {
|
|
||||||
fill: #F9FFFE;
|
|
||||||
}
|
|
||||||
.actor {
|
|
||||||
stroke: #81B1DB;
|
|
||||||
fill: #BDD5EA;
|
|
||||||
}
|
|
||||||
text.actor {
|
|
||||||
fill: black;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.actor-line {
|
|
||||||
stroke: lightgrey;
|
|
||||||
}
|
|
||||||
.messageLine0 {
|
|
||||||
stroke-width: 1.5;
|
|
||||||
stroke-dasharray: "2 2";
|
|
||||||
marker-end: "url(#arrowhead)";
|
|
||||||
stroke: lightgrey;
|
|
||||||
}
|
|
||||||
.messageLine1 {
|
|
||||||
stroke-width: 1.5;
|
|
||||||
stroke-dasharray: "2 2";
|
|
||||||
stroke: lightgrey;
|
|
||||||
}
|
|
||||||
#arrowhead {
|
|
||||||
fill: lightgrey !important;
|
|
||||||
}
|
|
||||||
#crosshead path {
|
|
||||||
fill: lightgrey !important;
|
|
||||||
stroke: lightgrey !important;
|
|
||||||
}
|
|
||||||
.messageText {
|
|
||||||
fill: lightgrey;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.labelBox {
|
|
||||||
stroke: #81B1DB;
|
|
||||||
fill: #BDD5EA;
|
|
||||||
}
|
|
||||||
.labelText {
|
|
||||||
fill: #323D47;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.loopText {
|
|
||||||
fill: lightgrey;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.loopLine {
|
|
||||||
stroke-width: 2;
|
|
||||||
stroke-dasharray: "2 2";
|
|
||||||
marker-end: "url(#arrowhead)";
|
|
||||||
stroke: #81B1DB;
|
|
||||||
}
|
|
||||||
.note {
|
|
||||||
stroke: rgba(255, 255, 255, 0.25);
|
|
||||||
fill: #fff5ad;
|
|
||||||
}
|
|
||||||
.noteText {
|
|
||||||
fill: black;
|
|
||||||
stroke: none;
|
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
/** Section styling */
|
|
||||||
.section {
|
|
||||||
stroke: none;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
.section0 {
|
|
||||||
fill: rgba(255, 255, 255, 0.3);
|
|
||||||
}
|
|
||||||
.section2 {
|
|
||||||
fill: #EAE8B9;
|
|
||||||
}
|
|
||||||
.section1,
|
|
||||||
.section3 {
|
|
||||||
fill: white;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
.sectionTitle0 {
|
|
||||||
fill: #F9FFFE;
|
|
||||||
}
|
|
||||||
.sectionTitle1 {
|
|
||||||
fill: #F9FFFE;
|
|
||||||
}
|
|
||||||
.sectionTitle2 {
|
|
||||||
fill: #F9FFFE;
|
|
||||||
}
|
|
||||||
.sectionTitle3 {
|
|
||||||
fill: #F9FFFE;
|
|
||||||
}
|
|
||||||
.sectionTitle {
|
|
||||||
text-anchor: start;
|
|
||||||
font-size: 11px;
|
|
||||||
text-height: 14px;
|
|
||||||
}
|
|
||||||
/* Grid and axis */
|
|
||||||
.grid .tick {
|
|
||||||
stroke: rgba(255, 255, 255, 0.3);
|
|
||||||
opacity: 0.3;
|
|
||||||
shape-rendering: crispEdges;
|
|
||||||
}
|
|
||||||
.grid .tick text {
|
|
||||||
fill: lightgrey;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.grid path {
|
|
||||||
stroke-width: 0;
|
|
||||||
}
|
|
||||||
/* Today line */
|
|
||||||
.today {
|
|
||||||
fill: none;
|
|
||||||
stroke: #DB5757;
|
|
||||||
stroke-width: 2px;
|
|
||||||
}
|
|
||||||
/* Task styling */
|
|
||||||
/* Default task */
|
|
||||||
.task {
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.taskText {
|
|
||||||
text-anchor: middle;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
.taskTextOutsideRight {
|
|
||||||
fill: #323D47;
|
|
||||||
text-anchor: start;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
.taskTextOutsideLeft {
|
|
||||||
fill: #323D47;
|
|
||||||
text-anchor: end;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
/* Specific task settings for the sections*/
|
|
||||||
.taskText0,
|
|
||||||
.taskText1,
|
|
||||||
.taskText2,
|
|
||||||
.taskText3 {
|
|
||||||
fill: #323D47;
|
|
||||||
}
|
|
||||||
.task0,
|
|
||||||
.task1,
|
|
||||||
.task2,
|
|
||||||
.task3 {
|
|
||||||
fill: #BDD5EA;
|
|
||||||
stroke: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
.taskTextOutside0,
|
|
||||||
.taskTextOutside2 {
|
|
||||||
fill: lightgrey;
|
|
||||||
}
|
|
||||||
.taskTextOutside1,
|
|
||||||
.taskTextOutside3 {
|
|
||||||
fill: lightgrey;
|
|
||||||
}
|
|
||||||
/* Active task */
|
|
||||||
.active0,
|
|
||||||
.active1,
|
|
||||||
.active2,
|
|
||||||
.active3 {
|
|
||||||
fill: #81B1DB;
|
|
||||||
stroke: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
.activeText0,
|
|
||||||
.activeText1,
|
|
||||||
.activeText2,
|
|
||||||
.activeText3 {
|
|
||||||
fill: #323D47 !important;
|
|
||||||
}
|
|
||||||
/* Completed task */
|
|
||||||
.done0,
|
|
||||||
.done1,
|
|
||||||
.done2,
|
|
||||||
.done3 {
|
|
||||||
fill: lightgrey;
|
|
||||||
}
|
|
||||||
.doneText0,
|
|
||||||
.doneText1,
|
|
||||||
.doneText2,
|
|
||||||
.doneText3 {
|
|
||||||
fill: #323D47 !important;
|
|
||||||
}
|
|
||||||
/* Tasks on the critical line */
|
|
||||||
.crit0,
|
|
||||||
.crit1,
|
|
||||||
.crit2,
|
|
||||||
.crit3 {
|
|
||||||
stroke: #E83737;
|
|
||||||
fill: #E83737;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.activeCrit0,
|
|
||||||
.activeCrit1,
|
|
||||||
.activeCrit2,
|
|
||||||
.activeCrit3 {
|
|
||||||
stroke: #E83737;
|
|
||||||
fill: #81B1DB;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.doneCrit0,
|
|
||||||
.doneCrit1,
|
|
||||||
.doneCrit2,
|
|
||||||
.doneCrit3 {
|
|
||||||
stroke: #E83737;
|
|
||||||
fill: lightgrey;
|
|
||||||
stroke-width: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
shape-rendering: crispEdges;
|
|
||||||
}
|
|
||||||
.doneCritText0,
|
|
||||||
.doneCritText1,
|
|
||||||
.doneCritText2,
|
|
||||||
.doneCritText3 {
|
|
||||||
fill: lightgrey !important;
|
|
||||||
}
|
|
||||||
.activeCritText0,
|
|
||||||
.activeCritText1,
|
|
||||||
.activeCritText2,
|
|
||||||
.activeCritText3 {
|
|
||||||
fill: #323D47 !important;
|
|
||||||
}
|
|
||||||
.titleText {
|
|
||||||
text-anchor: middle;
|
|
||||||
font-size: 18px;
|
|
||||||
fill: lightgrey;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
|
|
||||||
|
|
||||||
*/
|
|
||||||
.node text {
|
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
div.mermaidTooltip {
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 200px;
|
|
||||||
padding: 2px;
|
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
|
||||||
font-size: 12px;
|
|
||||||
background: #6D6D65;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
||||||
border-radius: 2px;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
353
dist/mermaid.forest.css
vendored
353
dist/mermaid.forest.css
vendored
@@ -1,353 +0,0 @@
|
|||||||
/* Flowchart variables */
|
|
||||||
/* Sequence Diagram variables */
|
|
||||||
/* Gantt chart variables */
|
|
||||||
.mermaid .label {
|
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.node rect,
|
|
||||||
.node circle,
|
|
||||||
.node ellipse,
|
|
||||||
.node polygon {
|
|
||||||
fill: #cde498;
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1px;
|
|
||||||
}
|
|
||||||
.edgePath .path {
|
|
||||||
stroke: green;
|
|
||||||
stroke-width: 1.5px;
|
|
||||||
}
|
|
||||||
.edgeLabel {
|
|
||||||
background-color: #e8e8e8;
|
|
||||||
}
|
|
||||||
.cluster rect {
|
|
||||||
fill: #cdffb2 !important;
|
|
||||||
rx: 4 !important;
|
|
||||||
stroke: #6eaa49 !important;
|
|
||||||
stroke-width: 1px !important;
|
|
||||||
}
|
|
||||||
.cluster text {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
.actor {
|
|
||||||
stroke: #13540c;
|
|
||||||
fill: #cde498;
|
|
||||||
}
|
|
||||||
text.actor {
|
|
||||||
fill: black;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.actor-line {
|
|
||||||
stroke: grey;
|
|
||||||
}
|
|
||||||
.messageLine0 {
|
|
||||||
stroke-width: 1.5;
|
|
||||||
stroke-dasharray: "2 2";
|
|
||||||
marker-end: "url(#arrowhead)";
|
|
||||||
stroke: #333;
|
|
||||||
}
|
|
||||||
.messageLine1 {
|
|
||||||
stroke-width: 1.5;
|
|
||||||
stroke-dasharray: "2 2";
|
|
||||||
stroke: #333;
|
|
||||||
}
|
|
||||||
#arrowhead {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
#crosshead path {
|
|
||||||
fill: #333 !important;
|
|
||||||
stroke: #333 !important;
|
|
||||||
}
|
|
||||||
.messageText {
|
|
||||||
fill: #333;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.labelBox {
|
|
||||||
stroke: #326932;
|
|
||||||
fill: #cde498;
|
|
||||||
}
|
|
||||||
.labelText {
|
|
||||||
fill: black;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.loopText {
|
|
||||||
fill: black;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
.loopLine {
|
|
||||||
stroke-width: 2;
|
|
||||||
stroke-dasharray: "2 2";
|
|
||||||
marker-end: "url(#arrowhead)";
|
|
||||||
stroke: #326932;
|
|
||||||
}
|
|
||||||
.note {
|
|
||||||
stroke: #6eaa49;
|
|
||||||
fill: #fff5ad;
|
|
||||||
}
|
|
||||||
.noteText {
|
|
||||||
fill: black;
|
|
||||||
stroke: none;
|
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
/** Section styling */
|
|
||||||
.section {
|
|
||||||
stroke: none;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
.section0 {
|
|
||||||
fill: #6eaa49;
|
|
||||||
}
|
|
||||||
.section2 {
|
|
||||||
fill: #6eaa49;
|
|
||||||
}
|
|
||||||
.section1,
|
|
||||||
.section3 {
|
|
||||||
fill: white;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
.sectionTitle0 {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
.sectionTitle1 {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
.sectionTitle2 {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
.sectionTitle3 {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
.sectionTitle {
|
|
||||||
text-anchor: start;
|
|
||||||
font-size: 11px;
|
|
||||||
text-height: 14px;
|
|
||||||
}
|
|
||||||
/* Grid and axis */
|
|
||||||
.grid .tick {
|
|
||||||
stroke: lightgrey;
|
|
||||||
opacity: 0.3;
|
|
||||||
shape-rendering: crispEdges;
|
|
||||||
}
|
|
||||||
.grid path {
|
|
||||||
stroke-width: 0;
|
|
||||||
}
|
|
||||||
/* Today line */
|
|
||||||
.today {
|
|
||||||
fill: none;
|
|
||||||
stroke: red;
|
|
||||||
stroke-width: 2px;
|
|
||||||
}
|
|
||||||
/* Task styling */
|
|
||||||
/* Default task */
|
|
||||||
.task {
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.taskText {
|
|
||||||
text-anchor: middle;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
.taskTextOutsideRight {
|
|
||||||
fill: black;
|
|
||||||
text-anchor: start;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
.taskTextOutsideLeft {
|
|
||||||
fill: black;
|
|
||||||
text-anchor: end;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
/* Specific task settings for the sections*/
|
|
||||||
.taskText0,
|
|
||||||
.taskText1,
|
|
||||||
.taskText2,
|
|
||||||
.taskText3 {
|
|
||||||
fill: white;
|
|
||||||
}
|
|
||||||
.task0,
|
|
||||||
.task1,
|
|
||||||
.task2,
|
|
||||||
.task3 {
|
|
||||||
fill: #487e3a;
|
|
||||||
stroke: #13540c;
|
|
||||||
}
|
|
||||||
.taskTextOutside0,
|
|
||||||
.taskTextOutside2 {
|
|
||||||
fill: black;
|
|
||||||
}
|
|
||||||
.taskTextOutside1,
|
|
||||||
.taskTextOutside3 {
|
|
||||||
fill: black;
|
|
||||||
}
|
|
||||||
/* Active task */
|
|
||||||
.active0,
|
|
||||||
.active1,
|
|
||||||
.active2,
|
|
||||||
.active3 {
|
|
||||||
fill: #cde498;
|
|
||||||
stroke: #13540c;
|
|
||||||
}
|
|
||||||
.activeText0,
|
|
||||||
.activeText1,
|
|
||||||
.activeText2,
|
|
||||||
.activeText3 {
|
|
||||||
fill: black !important;
|
|
||||||
}
|
|
||||||
/* Completed task */
|
|
||||||
.done0,
|
|
||||||
.done1,
|
|
||||||
.done2,
|
|
||||||
.done3 {
|
|
||||||
stroke: grey;
|
|
||||||
fill: lightgrey;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.doneText0,
|
|
||||||
.doneText1,
|
|
||||||
.doneText2,
|
|
||||||
.doneText3 {
|
|
||||||
fill: black !important;
|
|
||||||
}
|
|
||||||
/* Tasks on the critical line */
|
|
||||||
.crit0,
|
|
||||||
.crit1,
|
|
||||||
.crit2,
|
|
||||||
.crit3 {
|
|
||||||
stroke: #ff8888;
|
|
||||||
fill: red;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.activeCrit0,
|
|
||||||
.activeCrit1,
|
|
||||||
.activeCrit2,
|
|
||||||
.activeCrit3 {
|
|
||||||
stroke: #ff8888;
|
|
||||||
fill: #cde498;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.doneCrit0,
|
|
||||||
.doneCrit1,
|
|
||||||
.doneCrit2,
|
|
||||||
.doneCrit3 {
|
|
||||||
stroke: #ff8888;
|
|
||||||
fill: lightgrey;
|
|
||||||
stroke-width: 2;
|
|
||||||
cursor: pointer;
|
|
||||||
shape-rendering: crispEdges;
|
|
||||||
}
|
|
||||||
.doneCritText0,
|
|
||||||
.doneCritText1,
|
|
||||||
.doneCritText2,
|
|
||||||
.doneCritText3 {
|
|
||||||
fill: black !important;
|
|
||||||
}
|
|
||||||
.activeCritText0,
|
|
||||||
.activeCritText1,
|
|
||||||
.activeCritText2,
|
|
||||||
.activeCritText3 {
|
|
||||||
fill: black !important;
|
|
||||||
}
|
|
||||||
.titleText {
|
|
||||||
text-anchor: middle;
|
|
||||||
font-size: 18px;
|
|
||||||
fill: black;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
|
|
||||||
|
|
||||||
*/
|
|
||||||
g.classGroup text {
|
|
||||||
fill: #13540c;
|
|
||||||
stroke: none;
|
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
g.classGroup rect {
|
|
||||||
fill: #cde498;
|
|
||||||
stroke: #13540c;
|
|
||||||
}
|
|
||||||
g.classGroup line {
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
svg .classLabel .box {
|
|
||||||
stroke: none;
|
|
||||||
stroke-width: 0;
|
|
||||||
fill: #cde498;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
svg .classLabel .label {
|
|
||||||
fill: #13540c;
|
|
||||||
}
|
|
||||||
.relation {
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
fill: none;
|
|
||||||
}
|
|
||||||
.composition {
|
|
||||||
fill: #13540c;
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
#compositionStart {
|
|
||||||
fill: #13540c;
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
#compositionEnd {
|
|
||||||
fill: #13540c;
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.aggregation {
|
|
||||||
fill: #cde498;
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
#aggregationStart {
|
|
||||||
fill: #cde498;
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
#aggregationEnd {
|
|
||||||
fill: #cde498;
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
#dependencyStart {
|
|
||||||
fill: #13540c;
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
#dependencyEnd {
|
|
||||||
fill: #13540c;
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
#extensionStart {
|
|
||||||
fill: #13540c;
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
#extensionEnd {
|
|
||||||
fill: #13540c;
|
|
||||||
stroke: #13540c;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.node text {
|
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
div.mermaidTooltip {
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 200px;
|
|
||||||
padding: 2px;
|
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
|
||||||
font-size: 12px;
|
|
||||||
background: #cdffb2;
|
|
||||||
border: 1px solid #6eaa49;
|
|
||||||
border-radius: 2px;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
@@ -4,10 +4,6 @@
|
|||||||
var gulp = require('gulp')
|
var gulp = require('gulp')
|
||||||
var shell = require('gulp-shell')
|
var shell = require('gulp-shell')
|
||||||
var liveServer = require('live-server')
|
var liveServer = require('live-server')
|
||||||
var rename = require('gulp-rename')
|
|
||||||
var uglify = require('gulp-uglify')
|
|
||||||
var browserify = require('gulp-browserify')
|
|
||||||
var extReplace = require('gulp-ext-replace')
|
|
||||||
|
|
||||||
var params = {
|
var params = {
|
||||||
port: 8080, // Set the server port. Defaults to 8080.
|
port: 8080, // Set the server port. Defaults to 8080.
|
||||||
@@ -28,17 +24,3 @@ gulp.task('watch2', ['live-server'], function () {
|
|||||||
'yarn build -- --watch'
|
'yarn build -- --watch'
|
||||||
])
|
])
|
||||||
})
|
})
|
||||||
|
|
||||||
// Basic usage
|
|
||||||
gulp.task('watch-mermaid', function () {
|
|
||||||
return gulp.src('src/mermaid.js')
|
|
||||||
.pipe(browserify({
|
|
||||||
entry: 'src/mermaid.js',
|
|
||||||
standalone: 'mermaid'
|
|
||||||
}))
|
|
||||||
.pipe(rename('mermaid.js'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
.pipe(uglify())
|
|
||||||
.pipe(extReplace('.min.js'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -1,96 +1,5 @@
|
|||||||
var gulp = require('gulp')
|
var gulp = require('gulp')
|
||||||
var browserify = require('gulp-browserify')
|
|
||||||
|
|
||||||
var concat = require('gulp-concat')
|
var concat = require('gulp-concat')
|
||||||
var uglify = require('gulp-uglify')
|
|
||||||
var extReplace = require('gulp-ext-replace')
|
|
||||||
var rename = require('gulp-rename')
|
|
||||||
var insert = require('gulp-insert')
|
|
||||||
|
|
||||||
/**
|
|
||||||
* dist targets
|
|
||||||
* * dist - creates everything
|
|
||||||
* * mermaidAPI
|
|
||||||
* * mermaidAPI.slim
|
|
||||||
* * legacy - uses old build creates mermaid.full and mermaid.slim
|
|
||||||
* * mermaid - new build creates mermaid.js and mermaid.min.js, mermaid.no-d3.js mermaid.no-d3.min.js
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Basic usage
|
|
||||||
gulp.task('slimDist', function () {
|
|
||||||
// Single entry point to browserify
|
|
||||||
return gulp.src('src/main.js')
|
|
||||||
.pipe(browserify())
|
|
||||||
.pipe(rename('mermaid-legacy.slim.js'))
|
|
||||||
.pipe(insert.prepend('(function () { var define = undefined; '))
|
|
||||||
.pipe(insert.append(' })();'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
.pipe(uglify())
|
|
||||||
.pipe(extReplace('.min.js'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
})
|
|
||||||
|
|
||||||
// Basic usage
|
|
||||||
gulp.task('fullDist', ['slimDist'], function () {
|
|
||||||
// Single entry point to browserify
|
|
||||||
gulp.src(['node_modules/d3/d3.min.js', 'node_modules/dagre-d3/dist/dagre-d3.min.js', 'dist/mermaid.slim.js'])
|
|
||||||
.pipe(concat('mermaid-legacy.full.js'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
return gulp.src(['node_modules/d3/d3.min.js', 'node_modules/dagre-d3/dist/dagre-d3.min.js', 'dist/mermaid.slim.min.js'])
|
|
||||||
.pipe(concat('mermaid.full.min.js'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
})
|
|
||||||
|
|
||||||
// Basic usage
|
|
||||||
gulp.task('mermaid.slim', function () {
|
|
||||||
return gulp.src('src/mermaid.js')
|
|
||||||
.pipe(browserify({
|
|
||||||
external: ['d3'],
|
|
||||||
entry: 'src/mermaid.js',
|
|
||||||
standalone: 'mermaid'
|
|
||||||
}))
|
|
||||||
.pipe(rename('mermaid.slim.js'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
.pipe(uglify())
|
|
||||||
.pipe(extReplace('.min.js'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
})
|
|
||||||
|
|
||||||
// Basic usage
|
|
||||||
gulp.task('mermaid', function () {
|
|
||||||
return gulp.src('src/mermaid.js')
|
|
||||||
.pipe(browserify({
|
|
||||||
entry: 'src/mermaid.js',
|
|
||||||
standalone: 'mermaid'
|
|
||||||
}))
|
|
||||||
.pipe(rename('mermaid.js'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
.pipe(uglify())
|
|
||||||
.pipe(extReplace('.min.js'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
})
|
|
||||||
|
|
||||||
// Basic usage
|
|
||||||
gulp.task('mermaidAPI', function () {
|
|
||||||
return gulp.src('src/mermaidAPI.js')
|
|
||||||
.pipe(browserify({
|
|
||||||
}))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
})
|
|
||||||
|
|
||||||
// Basic usage
|
|
||||||
gulp.task('mermaidAPI.slim', function () {
|
|
||||||
return gulp.src('src/mermaidAPI.js')
|
|
||||||
.pipe(browserify({
|
|
||||||
debug: true,
|
|
||||||
external: ['d3']
|
|
||||||
}))
|
|
||||||
.pipe(rename('mermaidAPI.slim.js'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
.pipe(uglify())
|
|
||||||
.pipe(extReplace('.min.js'))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
})
|
|
||||||
|
|
||||||
// Build editor
|
// Build editor
|
||||||
gulp.task('editor', function () {
|
gulp.task('editor', function () {
|
||||||
@@ -98,7 +7,3 @@ gulp.task('editor', function () {
|
|||||||
.pipe(concat('build.js'))
|
.pipe(concat('build.js'))
|
||||||
.pipe(gulp.dest('./editor/'))
|
.pipe(gulp.dest('./editor/'))
|
||||||
})
|
})
|
||||||
|
|
||||||
gulp.task('legacy', ['slimDist', 'fullDist'])
|
|
||||||
|
|
||||||
gulp.task('dist', ['mermaidAPI', 'mermaidAPI.slim', 'mermaid.slim', 'mermaid'])
|
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
var gulp = require('gulp')
|
var gulp = require('gulp')
|
||||||
var path = require('path')
|
var path = require('path')
|
||||||
var less = require('gulp-less')
|
var less = require('gulp-less')
|
||||||
var rename = require('gulp-rename')
|
|
||||||
var concat = require('gulp-concat')
|
var concat = require('gulp-concat')
|
||||||
|
|
||||||
gulp.task('editor-less', function () {
|
gulp.task('editor-less', function () {
|
||||||
@@ -14,21 +13,4 @@ gulp.task('editor-less', function () {
|
|||||||
.pipe(gulp.dest('./editor/css/'))
|
.pipe(gulp.dest('./editor/css/'))
|
||||||
})
|
})
|
||||||
|
|
||||||
gulp.task('mermaid-less', function () {
|
gulp.task('less', ['editor-less'])
|
||||||
gulp.src(['./src/less/*/mermaid.less'])
|
|
||||||
.pipe(less({
|
|
||||||
generateSourceMap: false, // default true
|
|
||||||
paths: [path.join(__dirname, 'less', 'includes')]
|
|
||||||
}))
|
|
||||||
.pipe(rename(function (path) {
|
|
||||||
if (path.dirname === 'default') {
|
|
||||||
path.basename = 'mermaid'
|
|
||||||
} else {
|
|
||||||
path.basename = 'mermaid.' + path.dirname
|
|
||||||
}
|
|
||||||
path.dirname = ''
|
|
||||||
}))
|
|
||||||
.pipe(gulp.dest('./dist/'))
|
|
||||||
})
|
|
||||||
|
|
||||||
gulp.task('less', ['mermaid-less', 'editor-less'])
|
|
||||||
|
|||||||
@@ -1,20 +1,10 @@
|
|||||||
var gulp = require('gulp')
|
var gulp = require('gulp')
|
||||||
var jasmine = require('gulp-jasmine')
|
var jasmine = require('gulp-jasmine')
|
||||||
var shell = require('gulp-shell')
|
|
||||||
var istanbul = require('gulp-istanbul')
|
var istanbul = require('gulp-istanbul')
|
||||||
var jshint = require('gulp-jshint')
|
|
||||||
var stylish = require('jshint-stylish')
|
|
||||||
var qunit = require('gulp-qunit')
|
var qunit = require('gulp-qunit')
|
||||||
var bower = require('gulp-bower')
|
var bower = require('gulp-bower')
|
||||||
|
|
||||||
// Using gulp-jshint and jshint-stylish
|
gulp.task('test', ['coverage', 'jasmine', 'qunit'])
|
||||||
gulp.task('lint', function () {
|
|
||||||
return gulp.src(['./src/**/*.js', '!**/parser/*.js'])
|
|
||||||
.pipe(jshint())
|
|
||||||
.pipe(jshint.reporter(stylish))
|
|
||||||
})
|
|
||||||
|
|
||||||
gulp.task('test', ['coverage', 'tape', 'jasmine', 'qunit'])
|
|
||||||
|
|
||||||
gulp.task('jasmine', ['jison', 'lint'], function () {
|
gulp.task('jasmine', ['jison', 'lint'], function () {
|
||||||
return gulp.src(['src/**/*.spec.js'])
|
return gulp.src(['src/**/*.spec.js'])
|
||||||
@@ -26,8 +16,6 @@ gulp.task('jas', function () {
|
|||||||
.pipe(jasmine({ includeStackTrace: true }))
|
.pipe(jasmine({ includeStackTrace: true }))
|
||||||
})
|
})
|
||||||
|
|
||||||
gulp.task('tape', shell.task(['node_modules/.bin/tape ./test/cli_test-*.js']))
|
|
||||||
|
|
||||||
gulp.task('coverage', function (cb) {
|
gulp.task('coverage', function (cb) {
|
||||||
gulp.src(['src/**/*.js', '!src/**/*.spec.js'])
|
gulp.src(['src/**/*.js', '!src/**/*.spec.js'])
|
||||||
.pipe(istanbul()) // Covering files
|
.pipe(istanbul()) // Covering files
|
||||||
|
|||||||
10
gulpfile.js
10
gulpfile.js
@@ -1,13 +1,3 @@
|
|||||||
require('gulp')
|
|
||||||
require('gulp-shell')
|
|
||||||
require('gulp-concat')
|
|
||||||
require('gulp-uglify')
|
|
||||||
require('gulp-ext-replace')
|
|
||||||
require('gulp-rename')
|
|
||||||
require('gulp-istanbul')
|
|
||||||
require('gulp-bump')
|
|
||||||
require('gulp-tag-version')
|
|
||||||
require('gulp-insert')
|
|
||||||
var requireDir = require('require-dir')
|
var requireDir = require('require-dir')
|
||||||
|
|
||||||
requireDir('./gulp/tasks')
|
requireDir('./gulp/tasks')
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ module.exports = function (config) {
|
|||||||
|
|
||||||
// frameworks to use
|
// frameworks to use
|
||||||
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||||
frameworks: ['browserify', 'jasmine'],
|
frameworks: ['jasmine'],
|
||||||
|
|
||||||
// list of files / patterns to load in the browser
|
// list of files / patterns to load in the browser
|
||||||
files: [
|
files: [
|
||||||
@@ -23,25 +23,34 @@ module.exports = function (config) {
|
|||||||
],
|
],
|
||||||
|
|
||||||
preprocessors: {
|
preprocessors: {
|
||||||
'src/**/*.spec.js': ['browserify']
|
'src/**/*.spec.js': ['webpack']
|
||||||
},
|
},
|
||||||
|
|
||||||
// list of files to exclude
|
webpack: {
|
||||||
// exclude: ['src/diagrams/*.js'],
|
externals: ['fs'],
|
||||||
|
module: {
|
||||||
browserify: {
|
rules: [
|
||||||
debug: true,
|
{
|
||||||
// plugin: ['proxyquireify/plugin']
|
test: /\.js$/,
|
||||||
extensions: ['.js'],
|
use: {
|
||||||
configure: function (bundle) {
|
loader: 'babel-loader',
|
||||||
bundle.on('prebundle', function () {
|
options: {
|
||||||
bundle
|
presets: [
|
||||||
.plugin('proxyquire-universal')
|
['env', {
|
||||||
})
|
'targets': {
|
||||||
|
'browsers': ['last 3 versions']
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
'transform-remove-strict-mode'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// preprocess matching files before serving them to the browser
|
|
||||||
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
|
||||||
|
|
||||||
// test results reporter to use
|
// test results reporter to use
|
||||||
// possible values: 'dots', 'progress'
|
// possible values: 'dots', 'progress'
|
||||||
@@ -61,14 +70,26 @@ module.exports = function (config) {
|
|||||||
// enable / disable watching file and executing tests whenever any file changes
|
// enable / disable watching file and executing tests whenever any file changes
|
||||||
autoWatch: true,
|
autoWatch: true,
|
||||||
|
|
||||||
|
customLaunchers: {
|
||||||
|
ChromeHeadless: {
|
||||||
|
base: 'Chrome',
|
||||||
|
flags: [
|
||||||
|
'--headless',
|
||||||
|
'--disable-gpu',
|
||||||
|
'--no-sandbox',
|
||||||
|
// Without a remote debugging port, Google Chrome exits immediately.
|
||||||
|
'--remote-debugging-port=9222'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// start these browsers
|
// start these browsers
|
||||||
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
|
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
|
||||||
browsers: ['PhantomJS'],
|
browsers: ['ChromeHeadless'],
|
||||||
plugins: [
|
plugins: [
|
||||||
'karma-jasmine',
|
'karma-jasmine',
|
||||||
'karma-phantomjs-launcher',
|
'karma-chrome-launcher',
|
||||||
'karma-browserify',
|
'karma-webpack'
|
||||||
'karma-babel-preprocessor'
|
|
||||||
],
|
],
|
||||||
// Continuous Integration mode
|
// Continuous Integration mode
|
||||||
// if true, Karma captures browsers, runs the tests and exits
|
// if true, Karma captures browsers, runs the tests and exits
|
||||||
|
|||||||
66
package.json
66
package.json
@@ -1,50 +1,35 @@
|
|||||||
{
|
{
|
||||||
"name": "mermaid",
|
"name": "mermaid",
|
||||||
"version": "7.0.0",
|
"version": "7.0.0",
|
||||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.",
|
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||||
"main": "src/mermaid.js",
|
"main": "src/mermaid.js",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"diagram",
|
"diagram",
|
||||||
"markdown",
|
"markdown",
|
||||||
"flowchart",
|
"flowchart",
|
||||||
"sequence diagram",
|
"sequence diagram",
|
||||||
"gantt"
|
"gantt",
|
||||||
|
"class diagram",
|
||||||
|
"git graph"
|
||||||
],
|
],
|
||||||
"bin": {
|
"bin": {
|
||||||
"mermaid": "./bin/mermaid.js"
|
"mermaid": "./bin/mermaid.js"
|
||||||
},
|
},
|
||||||
"watch": {
|
|
||||||
"lint": {
|
|
||||||
"patterns": [
|
|
||||||
"bin",
|
|
||||||
"gulp",
|
|
||||||
"lib",
|
|
||||||
"src",
|
|
||||||
"test",
|
|
||||||
"*.js"
|
|
||||||
],
|
|
||||||
"extensions": "js",
|
|
||||||
"ignore": [
|
|
||||||
"src/d3.js",
|
|
||||||
"**/parser/*.js"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"watch": "yarn build -- --watch",
|
||||||
"build": "node -r babel-register ./node_modules/.bin/webpack --progress --colors",
|
"build": "node -r babel-register ./node_modules/.bin/webpack --progress --colors",
|
||||||
"dist": "node -r babel-register ./node_modules/.bin/webpack --progress --colors -p --config webpack.config.prod.js",
|
"dist": "node -r babel-register ./node_modules/.bin/webpack --progress --colors -p --config webpack.config.prod.js",
|
||||||
"upgrade": "rm -rf node_modules && rm yarn.lock && yarn install && ncu -ua && yarn upgrade && yarn remove d3 && yarn add d3@3.5.17",
|
"upgrade": "rm -rf node_modules && rm yarn.lock && yarn install && ncu -ua && yarn upgrade && yarn remove d3 && yarn add d3@3.5.17",
|
||||||
"live": "live-server ./test/examples",
|
|
||||||
"lint": "node_modules/.bin/standard",
|
"lint": "node_modules/.bin/standard",
|
||||||
"jison": "gulp jison_legacy",
|
|
||||||
"karma": "node node_modules/karma/bin/karma start karma.conf.js --single-run",
|
"karma": "node node_modules/karma/bin/karma start karma.conf.js --single-run",
|
||||||
"watch": "npm-watch",
|
|
||||||
"old_watch": "source ./scripts/watch.sh",
|
|
||||||
"doc": "rm -r build;rm -r dist/www;gulp vartree;cp dist/www/all.html ../mermaid-pages/index.html;cp dist/mermaid.js ../mermaid-pages/javascripts/lib;cp dist/mermaid.forest.css ../mermaid-pages/stylesheets",
|
|
||||||
"tape": "node node_modules/tape/bin/tape test/cli_test-*.js",
|
"tape": "node node_modules/tape/bin/tape test/cli_test-*.js",
|
||||||
"jasmine": "yarn run jison && node node_modules/jasmine-es6/bin/jasmine.js",
|
"test": "yarn run tape && yarn run karma",
|
||||||
"pretest": "yarn run jison && yarn lint",
|
"live": "live-server ./test/examples",
|
||||||
"test": "yarn run tape && yarn run karma"
|
"jison": "gulp jison_legacy",
|
||||||
|
"live_server": "gulp live-server",
|
||||||
|
"doc": "rm -r build;rm -r dist/www;gulp vartree;cp dist/www/all.html ../mermaid-pages/index.html;cp dist/mermaid.js ../mermaid-pages/javascripts/lib;cp dist/mermaid.forest.css ../mermaid-pages/stylesheets",
|
||||||
|
"pretest": "yarn lint",
|
||||||
|
"prepublishOnly": "yarn build && yarn dist && yarn test"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@@ -76,18 +61,18 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"async": "^2.3.0",
|
"async": "^2.3.0",
|
||||||
"babel-core": "^6.24.1",
|
"babel-core": "^6.24.1",
|
||||||
"babel-loader": "^6.4.1",
|
"babel-loader": "^7.0.0",
|
||||||
"babel-plugin-transform-remove-strict-mode": "^0.0.2",
|
"babel-plugin-transform-remove-strict-mode": "^0.0.2",
|
||||||
"babel-preset-env": "^1.4.0",
|
"babel-preset-env": "^1.4.0",
|
||||||
"browserify": "~14.3.0",
|
|
||||||
"clone": "^2.1.1",
|
"clone": "^2.1.1",
|
||||||
"codeclimate-test-reporter": "0.4.1",
|
"codeclimate-test-reporter": "0.4.1",
|
||||||
|
"css-loader": "^0.28.0",
|
||||||
"dox": "^0.9.0",
|
"dox": "^0.9.0",
|
||||||
"event-stream": "^3.3.4",
|
"event-stream": "^3.3.4",
|
||||||
|
"extract-text-webpack-plugin": "^2.1.0",
|
||||||
"front-matter": "^2.1.2",
|
"front-matter": "^2.1.2",
|
||||||
"gulp": "~3.9.1",
|
"gulp": "~3.9.1",
|
||||||
"gulp-bower": "0.0.13",
|
"gulp-bower": "0.0.13",
|
||||||
"gulp-browserify": "^0.5.1",
|
|
||||||
"gulp-bump": "^2.7.0",
|
"gulp-bump": "^2.7.0",
|
||||||
"gulp-concat": "~2.6.1",
|
"gulp-concat": "~2.6.1",
|
||||||
"gulp-data": "^1.2.1",
|
"gulp-data": "^1.2.1",
|
||||||
@@ -102,7 +87,6 @@
|
|||||||
"gulp-jasmine": "~2.4.2",
|
"gulp-jasmine": "~2.4.2",
|
||||||
"gulp-jasmine-browser": "^1.7.1",
|
"gulp-jasmine-browser": "^1.7.1",
|
||||||
"gulp-jison": "~1.2.0",
|
"gulp-jison": "~1.2.0",
|
||||||
"gulp-jshint": "^2.0.4",
|
|
||||||
"gulp-less": "^3.3.0",
|
"gulp-less": "^3.3.0",
|
||||||
"gulp-livereload": "^3.8.1",
|
"gulp-livereload": "^3.8.1",
|
||||||
"gulp-marked": "^1.0.0",
|
"gulp-marked": "^1.0.0",
|
||||||
@@ -111,34 +95,30 @@
|
|||||||
"gulp-rename": "~1.2.2",
|
"gulp-rename": "~1.2.2",
|
||||||
"gulp-shell": "^0.6.3",
|
"gulp-shell": "^0.6.3",
|
||||||
"gulp-tag-version": "^1.3.0",
|
"gulp-tag-version": "^1.3.0",
|
||||||
"gulp-uglify": "~2.1.2",
|
|
||||||
"gulp-util": "^3.0.8",
|
"gulp-util": "^3.0.8",
|
||||||
"gulp-vartree": "^2.0.1",
|
"gulp-vartree": "^2.0.1",
|
||||||
"hogan.js": "^3.0.2",
|
"hogan.js": "^3.0.2",
|
||||||
|
"inject-loader": "^3.0.0",
|
||||||
"jasmine": "2.5.3",
|
"jasmine": "2.5.3",
|
||||||
"jasmine-es6": "0.4.0",
|
"jasmine-es6": "0.4.0",
|
||||||
"jison": "^0.4.17",
|
"jison": "^0.4.17",
|
||||||
"jsdom": "^9.12.0",
|
"jsdom": "^9.12.0",
|
||||||
"jshint": "^2.9.4",
|
|
||||||
"jshint-stylish": "^2.2.1",
|
|
||||||
"karma": "^1.6.0",
|
"karma": "^1.6.0",
|
||||||
"karma-babel-preprocessor": "^6.0.1",
|
"karma-chrome-launcher": "^2.0.0",
|
||||||
"karma-browserify": "^5.1.1",
|
|
||||||
"karma-jasmine": "^1.1.0",
|
"karma-jasmine": "^1.1.0",
|
||||||
"karma-phantomjs-launcher": "^1.0.4",
|
"karma-webpack": "^2.0.3",
|
||||||
|
"less": "^2.7.2",
|
||||||
|
"less-loader": "^4.0.3",
|
||||||
"live-server": "^1.2.0",
|
"live-server": "^1.2.0",
|
||||||
"map-stream": "0.0.7",
|
"map-stream": "0.0.7",
|
||||||
"marked": "^0.3.6",
|
"marked": "^0.3.6",
|
||||||
"mock-browser": "^0.92.14",
|
"mock-browser": "^0.92.14",
|
||||||
"npm-check-updates": "^2.10.5",
|
"npm-check-updates": "^2.11.0",
|
||||||
"npm-watch": "^0.1.8",
|
"phantomjs-prebuilt": "^2.1.14",
|
||||||
"phantomjs": "^2.1.7",
|
|
||||||
"proxyquire": "^1.7.11",
|
|
||||||
"proxyquire-universal": "^1.0.8",
|
|
||||||
"proxyquireify": "^3.2.1",
|
|
||||||
"require-dir": "^0.3.1",
|
"require-dir": "^0.3.1",
|
||||||
"rimraf": "^2.6.1",
|
"rimraf": "^2.6.1",
|
||||||
"standard": "^10.0.2",
|
"standard": "^10.0.2",
|
||||||
|
"style-loader": "^0.16.1",
|
||||||
"tape": "^4.6.3",
|
"tape": "^4.6.3",
|
||||||
"webpack": "^2.4.1",
|
"webpack": "^2.4.1",
|
||||||
"webpack-node-externals": "^1.5.4"
|
"webpack-node-externals": "^1.5.4"
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
#!/usr/bin/env bash
|
|
||||||
|
|
||||||
yarn build-mermaid -- --watch & gulp live-server
|
|
||||||
@@ -17,7 +17,7 @@ var classCnt = 0
|
|||||||
var conf = {
|
var conf = {
|
||||||
dividerMargin: 10,
|
dividerMargin: 10,
|
||||||
padding: 5,
|
padding: 5,
|
||||||
textHeight: 14
|
textHeight: 10
|
||||||
}
|
}
|
||||||
|
|
||||||
// Todo optimize
|
// Todo optimize
|
||||||
@@ -200,8 +200,8 @@ var drawEdge = function (elem, path, relation) {
|
|||||||
.attr('class', 'box')
|
.attr('class', 'box')
|
||||||
.attr('x', bounds.x - conf.padding / 2)
|
.attr('x', bounds.x - conf.padding / 2)
|
||||||
.attr('y', bounds.y - conf.padding / 2)
|
.attr('y', bounds.y - conf.padding / 2)
|
||||||
.attr('width', bounds.width + 2 * conf.padding / 2)
|
.attr('width', bounds.width + conf.padding)
|
||||||
.attr('height', bounds.height + 2 * conf.padding / 2)
|
.attr('height', bounds.height + conf.padding)
|
||||||
}
|
}
|
||||||
|
|
||||||
edgeCount++
|
edgeCount++
|
||||||
@@ -259,8 +259,8 @@ var drawClass = function (elem, classDef) {
|
|||||||
|
|
||||||
var methodsLine = g.append('line') // text label for the x axis
|
var methodsLine = g.append('line') // text label for the x axis
|
||||||
.attr('x1', 0)
|
.attr('x1', 0)
|
||||||
.attr('y1', conf.padding + titleHeight + 3 * conf.dividerMargin / 2 + membersBox.height)
|
.attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
|
||||||
.attr('y2', conf.padding + titleHeight + 3 * conf.dividerMargin / 2 + membersBox.height)
|
.attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
|
||||||
|
|
||||||
var methods = g.append('text') // text label for the x axis
|
var methods = g.append('text') // text label for the x axis
|
||||||
.attr('x', conf.padding)
|
.attr('x', conf.padding)
|
||||||
|
|||||||
@@ -188,7 +188,7 @@ var setLink = function (id, linkStr) {
|
|||||||
var elem = d3.select(element).select('#' + id)
|
var elem = d3.select(element).select('#' + id)
|
||||||
if (elem !== null) {
|
if (elem !== null) {
|
||||||
elem.on('click', function () {
|
elem.on('click', function () {
|
||||||
window.open(linkStr, 'newTab') // jshint ignore:line
|
window.open(linkStr, 'newTab')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
var Logger = require('../../logger')
|
const Logger = require('../../logger')
|
||||||
var log = Logger.Log
|
const log = Logger.Log
|
||||||
var _ = require('lodash')
|
const _ = require('lodash')
|
||||||
|
|
||||||
var commits = {}
|
var commits = {}
|
||||||
var head = null
|
var head = null
|
||||||
@@ -136,19 +136,18 @@ exports.reset = function (commitRef) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function upsert (arr, key, newval) {
|
function upsert (arr, key, newval) {
|
||||||
var match = _.find(arr, key)
|
const index = arr.indexOf(key)
|
||||||
if (match) {
|
if (index === -1) {
|
||||||
var index = _.indexOf(arr, _.find(arr, key))
|
|
||||||
arr.splice(index, 1, newval)
|
|
||||||
} else {
|
|
||||||
arr.push(newval)
|
arr.push(newval)
|
||||||
|
} else {
|
||||||
|
arr.splice(index, 1, newval)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function prettyPrintCommitHistory (commitArr) {
|
function prettyPrintCommitHistory (commitArr) {
|
||||||
var commit = _.maxBy(commitArr, 'seq')
|
var commit = _.maxBy(commitArr, 'seq')
|
||||||
var line = ''
|
var line = ''
|
||||||
_.each(commitArr, function (c) {
|
commitArr.forEach(function (c) {
|
||||||
if (c === commit) {
|
if (c === commit) {
|
||||||
line += '\t*'
|
line += '\t*'
|
||||||
} else {
|
} else {
|
||||||
@@ -156,8 +155,8 @@ function prettyPrintCommitHistory (commitArr) {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
var label = [line, commit.id, commit.seq]
|
var label = [line, commit.id, commit.seq]
|
||||||
_.each(branches, function (v, k) {
|
_.each(branches, function (value, key) {
|
||||||
if (v === commit.id) label.push(k)
|
if (value === commit.id) label.push(key)
|
||||||
})
|
})
|
||||||
log.debug(label.join(' '))
|
log.debug(label.join(' '))
|
||||||
if (Array.isArray(commit.parent)) {
|
if (Array.isArray(commit.parent)) {
|
||||||
@@ -189,8 +188,8 @@ exports.clear = function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
exports.getBranchesAsObjArray = function () {
|
exports.getBranchesAsObjArray = function () {
|
||||||
var branchArr = _.map(branches, function (v, k) {
|
const branchArr = _.map(branches, function (value, key) {
|
||||||
return { 'name': k, 'commit': commits[v] }
|
return { 'name': key, 'commit': commits[value] }
|
||||||
})
|
})
|
||||||
return branchArr
|
return branchArr
|
||||||
}
|
}
|
||||||
@@ -201,7 +200,7 @@ exports.getCommitsArray = function () {
|
|||||||
var commitArr = Object.keys(commits).map(function (key) {
|
var commitArr = Object.keys(commits).map(function (key) {
|
||||||
return commits[key]
|
return commits[key]
|
||||||
})
|
})
|
||||||
_.each(commitArr, function (o) { log.debug(o.id) })
|
commitArr.forEach(function (o) { log.debug(o.id) })
|
||||||
return _.orderBy(commitArr, ['seq'], ['desc'])
|
return _.orderBy(commitArr, ['seq'], ['desc'])
|
||||||
}
|
}
|
||||||
exports.getCurrentBranch = function () { return curBranch }
|
exports.getCurrentBranch = function () { return curBranch }
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
var db = require('./gitGraphAst')
|
const db = require('./gitGraphAst')
|
||||||
var _ = require('lodash')
|
const _ = require('lodash')
|
||||||
var gitGraphParser = require('./parser/gitGraph')
|
const gitGraphParser = require('./parser/gitGraph')
|
||||||
var d3 = require('../../d3')
|
const d3 = require('../../d3')
|
||||||
var Logger = require('../../logger')
|
const Logger = require('../../logger')
|
||||||
var log = Logger.Log
|
const log = Logger.Log
|
||||||
|
|
||||||
var allCommitsDict = {}
|
var allCommitsDict = {}
|
||||||
var branchNum
|
var branchNum
|
||||||
var config = {
|
var config = {
|
||||||
nodeSpacing: 75,
|
nodeSpacing: 150,
|
||||||
nodeFillColor: 'yellow',
|
nodeFillColor: 'yellow',
|
||||||
nodeStrokeWidth: 2,
|
nodeStrokeWidth: 2,
|
||||||
nodeStrokeColor: 'grey',
|
nodeStrokeColor: 'grey',
|
||||||
@@ -17,12 +17,12 @@ var config = {
|
|||||||
lineColor: 'grey',
|
lineColor: 'grey',
|
||||||
leftMargin: 50,
|
leftMargin: 50,
|
||||||
branchColors: ['#442f74', '#983351', '#609732', '#AA9A39'],
|
branchColors: ['#442f74', '#983351', '#609732', '#AA9A39'],
|
||||||
nodeRadius: 15,
|
nodeRadius: 10,
|
||||||
nodeLabel: {
|
nodeLabel: {
|
||||||
width: 75,
|
width: 75,
|
||||||
height: 100,
|
height: 100,
|
||||||
x: -25,
|
x: -25,
|
||||||
y: 15
|
y: 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var apiConfig = {}
|
var apiConfig = {}
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
/* eslint-env jasmine */
|
/* eslint-env jasmine */
|
||||||
var proxyquire = require('proxyquire')
|
|
||||||
/**
|
/**
|
||||||
* Created by knut on 14-11-18.
|
* Created by knut on 14-11-18.
|
||||||
*/
|
*/
|
||||||
@@ -15,7 +14,10 @@ var d3 = {
|
|||||||
return new NewD3()
|
return new NewD3()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var sd = proxyquire('./sequenceRenderer', { '../../d3': d3 })
|
const MyModuleInjector = require('inject-loader!./sequenceRenderer') // eslint-disable-line import/no-webpack-loader-syntax
|
||||||
|
var sd = MyModuleInjector({
|
||||||
|
'../../d3': d3
|
||||||
|
})
|
||||||
|
|
||||||
function addConf (conf, key, value) {
|
function addConf (conf, key, value) {
|
||||||
if (value !== undefined) {
|
if (value !== undefined) {
|
||||||
|
|||||||
@@ -58,11 +58,10 @@ exports.drawLabel = function (elem, txtObject) {
|
|||||||
}
|
}
|
||||||
var polygon = elem.append('polygon')
|
var polygon = elem.append('polygon')
|
||||||
polygon.attr('points', genPoints(txtObject.x, txtObject.y, 50, 20, 7))
|
polygon.attr('points', genPoints(txtObject.x, txtObject.y, 50, 20, 7))
|
||||||
polygon.attr('style', 'fill:#526e52;stroke:none')
|
polygon.attr('class', 'labelBox')
|
||||||
|
|
||||||
txtObject.y = txtObject.y + txtObject.labelMargin
|
txtObject.y = txtObject.y + txtObject.labelMargin
|
||||||
txtObject.x = txtObject.x + 0.5 * txtObject.labelMargin
|
txtObject.x = txtObject.x + 0.5 * txtObject.labelMargin
|
||||||
txtObject.fill = 'white'
|
|
||||||
exports.drawText(elem, txtObject)
|
exports.drawText(elem, txtObject)
|
||||||
}
|
}
|
||||||
var actorCnt = -1
|
var actorCnt = -1
|
||||||
@@ -137,8 +136,6 @@ exports.drawLoop = function (elem, bounds, labelText, conf) {
|
|||||||
.attr('y1', starty)
|
.attr('y1', starty)
|
||||||
.attr('x2', stopx)
|
.attr('x2', stopx)
|
||||||
.attr('y2', stopy)
|
.attr('y2', stopy)
|
||||||
.attr('stroke-width', 2)
|
|
||||||
.attr('stroke', '#526e52')
|
|
||||||
.attr('class', 'loopLine')
|
.attr('class', 'loopLine')
|
||||||
}
|
}
|
||||||
drawLoopLine(bounds.startx, bounds.starty, bounds.stopx, bounds.starty)
|
drawLoopLine(bounds.startx, bounds.starty, bounds.stopx, bounds.starty)
|
||||||
@@ -157,7 +154,6 @@ exports.drawLoop = function (elem, bounds, labelText, conf) {
|
|||||||
txt.y = bounds.starty
|
txt.y = bounds.starty
|
||||||
txt.labelMargin = 1.5 * 10 // This is the small box that says "loop"
|
txt.labelMargin = 1.5 * 10 // This is the small box that says "loop"
|
||||||
txt.class = 'labelText' // Its size & position are fixed.
|
txt.class = 'labelText' // Its size & position are fixed.
|
||||||
txt.fill = 'white'
|
|
||||||
|
|
||||||
exports.drawLabel(g, txt)
|
exports.drawLabel(g, txt)
|
||||||
|
|
||||||
|
|||||||
@@ -1,56 +1,62 @@
|
|||||||
g.classGroup text {
|
g.classGroup text {
|
||||||
fill:@nodeBorder;
|
fill: @nodeBorder;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial;
|
||||||
font-size: 14px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
g.classGroup rect {
|
g.classGroup rect {
|
||||||
fill:@nodeBkg;
|
fill: @nodeBkg;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
}
|
}
|
||||||
|
|
||||||
g.classGroup line {
|
g.classGroup line {
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg .classLabel .box {
|
svg .classLabel .box {
|
||||||
stroke: none;
|
stroke: none;
|
||||||
stroke-width:0;
|
stroke-width: 0;
|
||||||
fill: @nodeBkg;
|
fill: @nodeBkg;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg .classLabel .label {
|
svg .classLabel .label {
|
||||||
fill: @nodeBorder;
|
fill: @nodeBorder;
|
||||||
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.relation {
|
.relation {
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
fill:none;
|
fill: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.composition{
|
.composition {
|
||||||
fill : @nodeBorder;
|
fill: @nodeBorder;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#compositionStart {
|
#compositionStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#compositionEnd {
|
#compositionEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
.aggregation{
|
|
||||||
fill : @nodeBkg;
|
.aggregation {
|
||||||
|
fill: @nodeBkg;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aggregationStart {
|
#aggregationStart {
|
||||||
.aggregation;
|
.aggregation;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aggregationEnd {
|
#aggregationEnd {
|
||||||
.aggregation;
|
.aggregation;
|
||||||
}
|
}
|
||||||
@@ -58,12 +64,15 @@ svg .classLabel .label {
|
|||||||
#dependencyStart {
|
#dependencyStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dependencyEnd {
|
#dependencyEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#extensionStart {
|
#extensionStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#extensionEnd {
|
#extensionEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
@@ -1,15 +1,16 @@
|
|||||||
.mermaid .label { color: @darkTextColor }
|
.mermaid .label {
|
||||||
|
color: @darkTextColor
|
||||||
|
}
|
||||||
|
|
||||||
.node rect,
|
.node rect,
|
||||||
.node circle,
|
.node circle,
|
||||||
.node ellipse,
|
.node ellipse,
|
||||||
.node polygon {
|
.node polygon {
|
||||||
fill: @mainBkg;
|
fill: @mainBkg;
|
||||||
stroke: @nodeBorder;
|
stroke: @border1;
|
||||||
stroke-width: 1px;
|
stroke-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.arrowheadPath {
|
.arrowheadPath {
|
||||||
fill: @arrowheadColor;
|
fill: @arrowheadColor;
|
||||||
}
|
}
|
||||||
@@ -22,7 +23,7 @@
|
|||||||
background-color: @edgeLabelBackground;
|
background-color: @edgeLabelBackground;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cluster rect{
|
.cluster rect {
|
||||||
fill: @secondBkg !important;
|
fill: @secondBkg !important;
|
||||||
rx: 4 !important;
|
rx: 4 !important;
|
||||||
stroke: @clusterBorder !important;
|
stroke: @clusterBorder !important;
|
||||||
|
|||||||
@@ -1,24 +1,39 @@
|
|||||||
/** Section styling */
|
/** Section styling */
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
stroke: none;
|
stroke: none;
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
.section0{
|
|
||||||
|
.section0 {
|
||||||
fill: @sectionBkgColor;
|
fill: @sectionBkgColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section2 {
|
.section2 {
|
||||||
fill: @sectionBkgColor2;
|
fill: @sectionBkgColor2;
|
||||||
}
|
}
|
||||||
.section1,.section3 {
|
|
||||||
|
.section1,
|
||||||
|
.section3 {
|
||||||
fill: @altSectionBkgColor;
|
fill: @altSectionBkgColor;
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionTitle0 { fill: @titleColor;}
|
.sectionTitle0 {
|
||||||
.sectionTitle1 { fill: @titleColor;}
|
fill: @titleColor;
|
||||||
.sectionTitle2 { fill: @titleColor;}
|
}
|
||||||
.sectionTitle3 { fill: @titleColor;}
|
|
||||||
|
|
||||||
|
.sectionTitle1 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle2 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle3 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
.sectionTitle {
|
.sectionTitle {
|
||||||
text-anchor: start;
|
text-anchor: start;
|
||||||
@@ -26,29 +41,39 @@
|
|||||||
text-height: 14px;
|
text-height: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Grid and axis */
|
/* Grid and axis */
|
||||||
|
|
||||||
.grid .tick {
|
.grid .tick {
|
||||||
stroke: @sectionBkgColor;
|
stroke: @sectionBkgColor;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
shape-rendering: crispEdges;
|
shape-rendering: crispEdges;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid .tick text {
|
.grid .tick text {
|
||||||
fill: @taskTextLightColor;
|
fill: @taskTextLightColor;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid path {
|
.grid path {
|
||||||
stroke-width: 0;
|
stroke-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Today line */
|
/* Today line */
|
||||||
|
|
||||||
.today {
|
.today {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: @todayLineColor;
|
stroke: @todayLineColor;
|
||||||
stroke-width: 2px;
|
stroke-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Task styling */
|
/* Task styling */
|
||||||
|
|
||||||
|
|
||||||
/* Default task */
|
/* Default task */
|
||||||
|
|
||||||
.task {
|
.task {
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
@@ -57,75 +82,126 @@
|
|||||||
text-anchor: middle;
|
text-anchor: middle;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutsideRight {
|
.taskTextOutsideRight {
|
||||||
fill: @taskTextDarkColor;
|
fill: @taskTextDarkColor;
|
||||||
text-anchor: start;
|
text-anchor: start;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutsideLeft {
|
.taskTextOutsideLeft {
|
||||||
fill: @taskTextDarkColor;
|
fill: @taskTextDarkColor;
|
||||||
text-anchor: end;
|
text-anchor: end;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Specific task settings for the sections*/
|
/* Specific task settings for the sections*/
|
||||||
|
|
||||||
.taskText0, .taskText1, .taskText2, .taskText3 {
|
.taskText0,
|
||||||
|
.taskText1,
|
||||||
|
.taskText2,
|
||||||
|
.taskText3 {
|
||||||
fill: @taskTextColor;
|
fill: @taskTextColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task0, .task1, .task2, .task3 {
|
.task0,
|
||||||
|
.task1,
|
||||||
|
.task2,
|
||||||
|
.task3 {
|
||||||
fill: @taskBkgColor;
|
fill: @taskBkgColor;
|
||||||
stroke: @taskBorderColor;
|
stroke: @taskBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutside0,.taskTextOutside2, {
|
.taskTextOutside0,
|
||||||
fill: @taskTextOutsideColor;
|
.taskTextOutside2,
|
||||||
}
|
{
|
||||||
.taskTextOutside1, .taskTextOutside3 {
|
|
||||||
fill: @taskTextOutsideColor;
|
fill: @taskTextOutsideColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.taskTextOutside1,
|
||||||
|
.taskTextOutside3 {
|
||||||
|
fill: @taskTextOutsideColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Active task */
|
/* Active task */
|
||||||
.active0, .active1, .active2, .active3 {
|
|
||||||
|
.active0,
|
||||||
|
.active1,
|
||||||
|
.active2,
|
||||||
|
.active3 {
|
||||||
fill: @activeTaskBkgColor;
|
fill: @activeTaskBkgColor;
|
||||||
stroke: @activeTaskBorderColor;
|
stroke: @activeTaskBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activeText0, .activeText1, .activeText2, .activeText3 {
|
.activeText0,
|
||||||
|
.activeText1,
|
||||||
|
.activeText2,
|
||||||
|
.activeText3 {
|
||||||
fill: @taskTextDarkColor !important;
|
fill: @taskTextDarkColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Completed task */
|
/* Completed task */
|
||||||
.done0, .done1, .done2, .done3 {
|
|
||||||
|
.done0,
|
||||||
|
.done1,
|
||||||
|
.done2,
|
||||||
|
.done3 {
|
||||||
fill: @doneTaskBkgColor;
|
fill: @doneTaskBkgColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doneText0, .doneText1, .doneText2, .doneText3 {
|
.doneText0,
|
||||||
|
.doneText1,
|
||||||
|
.doneText2,
|
||||||
|
.doneText3 {
|
||||||
fill: @taskTextDarkColor !important;
|
fill: @taskTextDarkColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Tasks on the critical line */
|
/* Tasks on the critical line */
|
||||||
.crit0, .crit1, .crit2, .crit3 {
|
|
||||||
|
.crit0,
|
||||||
|
.crit1,
|
||||||
|
.crit2,
|
||||||
|
.crit3 {
|
||||||
stroke: @critBorderColor;
|
stroke: @critBorderColor;
|
||||||
fill: @critBkgColor;
|
fill: @critBkgColor;
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
|
|
||||||
|
.activeCrit0,
|
||||||
|
.activeCrit1,
|
||||||
|
.activeCrit2,
|
||||||
|
.activeCrit3 {
|
||||||
stroke: @critBorderColor;
|
stroke: @critBorderColor;
|
||||||
fill: @activeTaskBkgColor;
|
fill: @activeTaskBkgColor;
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
|
|
||||||
|
.doneCrit0,
|
||||||
|
.doneCrit1,
|
||||||
|
.doneCrit2,
|
||||||
|
.doneCrit3 {
|
||||||
stroke: @critBorderColor;
|
stroke: @critBorderColor;
|
||||||
fill: @doneTaskBkgColor;
|
fill: @doneTaskBkgColor;
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
shape-rendering: crispEdges;
|
shape-rendering: crispEdges;
|
||||||
}
|
}
|
||||||
.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
|
|
||||||
|
.doneCritText0,
|
||||||
|
.doneCritText1,
|
||||||
|
.doneCritText2,
|
||||||
|
.doneCritText3 {
|
||||||
fill: @taskTextLightColor !important;
|
fill: @taskTextLightColor !important;
|
||||||
}
|
}
|
||||||
.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
|
|
||||||
|
.activeCritText0,
|
||||||
|
.activeCritText1,
|
||||||
|
.activeCritText2,
|
||||||
|
.activeCritText3 {
|
||||||
fill: @taskTextDarkColor !important;
|
fill: @taskTextDarkColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -134,7 +210,3 @@
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
fill: @taskTextLightColor;
|
fill: @taskTextLightColor;
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|||||||
6
src/less/dark/gitGraph.less
Normal file
6
src/less/dark/gitGraph.less
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
.commit-id,
|
||||||
|
.commit-msg,
|
||||||
|
.branch-label {
|
||||||
|
fill: lightgrey;
|
||||||
|
color: lightgrey;
|
||||||
|
}
|
||||||
@@ -3,10 +3,10 @@
|
|||||||
@import "sequenceDiagram";
|
@import "sequenceDiagram";
|
||||||
@import "gantt";
|
@import "gantt";
|
||||||
@import "classDiagram";
|
@import "classDiagram";
|
||||||
|
@import "gitGraph";
|
||||||
.node text {
|
.node text {
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial;
|
||||||
font-size:14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.mermaidTooltip {
|
div.mermaidTooltip {
|
||||||
@@ -20,5 +20,5 @@ div.mermaidTooltip {
|
|||||||
border: 1px solid @border2;
|
border: 1px solid @border2;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index:100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,8 @@
|
|||||||
|
|
||||||
|
|
||||||
.actor {
|
.actor {
|
||||||
stroke: @actorBorder;
|
stroke: @actorBorder;
|
||||||
fill: @actorBkg;
|
fill: @actorBkg;
|
||||||
}
|
}
|
||||||
|
|
||||||
text.actor {
|
text.actor {
|
||||||
fill: @actorTextColor;
|
fill: @actorTextColor;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
@@ -33,8 +32,8 @@ text.actor {
|
|||||||
#crosshead path {
|
#crosshead path {
|
||||||
fill: @signalColor !important;
|
fill: @signalColor !important;
|
||||||
stroke: @signalColor !important;
|
stroke: @signalColor !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageText {
|
.messageText {
|
||||||
fill: @signalTextColor;
|
fill: @signalTextColor;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
|
|||||||
@@ -7,58 +7,46 @@
|
|||||||
@border2: rgba(255, 255, 255, 0.25);
|
@border2: rgba(255, 255, 255, 0.25);
|
||||||
@arrowheadColor: @mainContrastColor;
|
@arrowheadColor: @mainContrastColor;
|
||||||
|
|
||||||
|
|
||||||
/* Flowchart variables */
|
/* Flowchart variables */
|
||||||
@nodeBkg:@mainBkg;
|
|
||||||
@nodeBorder:@border1;
|
|
||||||
|
|
||||||
@clusterBkg:@secondBkg;
|
|
||||||
@clusterBorder:@border2;
|
|
||||||
|
|
||||||
@defaultLinkColor:@lineColor;
|
|
||||||
|
|
||||||
|
@nodeBkg: @mainBkg;
|
||||||
|
@nodeBorder: purple;
|
||||||
|
@clusterBkg: @secondBkg;
|
||||||
|
@clusterBorder: @border2;
|
||||||
|
@defaultLinkColor: @lineColor;
|
||||||
@titleColor: #F9FFFE;
|
@titleColor: #F9FFFE;
|
||||||
|
|
||||||
@edgeLabelBackground: #e8e8e8;
|
@edgeLabelBackground: #e8e8e8;
|
||||||
|
|
||||||
/* Sequence Diagram variables */
|
/* Sequence Diagram variables */
|
||||||
|
|
||||||
@actorBorder: @border1;
|
@actorBorder: @border1;
|
||||||
@actorBkg: @mainBkg;
|
@actorBkg: @mainBkg;
|
||||||
@actorTextColor: black;
|
@actorTextColor: black;
|
||||||
@actorLineColor: @mainContrastColor;
|
@actorLineColor: @mainContrastColor;
|
||||||
|
|
||||||
@signalColor: @mainContrastColor;
|
@signalColor: @mainContrastColor;
|
||||||
@signalTextColor: @mainContrastColor;
|
@signalTextColor: @mainContrastColor;
|
||||||
|
|
||||||
@labelBoxBkgColor: @actorBkg;
|
@labelBoxBkgColor: @actorBkg;
|
||||||
@labelBoxBorderColor: @actorBorder;
|
@labelBoxBorderColor: @actorBorder;
|
||||||
@labelTextColor: @mainContrastColor;
|
@labelTextColor: @mainContrastColor;
|
||||||
|
|
||||||
@noteBorderColor: @border2;
|
@noteBorderColor: @border2;
|
||||||
@noteBkgColor: #fff5ad;
|
@noteBkgColor: #fff5ad;
|
||||||
|
|
||||||
/* Gantt chart variables */
|
/* Gantt chart variables */
|
||||||
|
|
||||||
@sectionBkgColor: rgba(255, 255, 255, 0.3);
|
@sectionBkgColor: rgba(255, 255, 255, 0.3);
|
||||||
@altSectionBkgColor: white;
|
@altSectionBkgColor: white;
|
||||||
@sectionBkgColor2: #EAE8B9;
|
@sectionBkgColor2: #EAE8B9;
|
||||||
|
|
||||||
@taskBorderColor: rgba(255, 255, 255, 0.5);
|
@taskBorderColor: rgba(255, 255, 255, 0.5);
|
||||||
@taskBkgColor: @mainBkg;
|
@taskBkgColor: @mainBkg;
|
||||||
@taskTextColor: @darkTextColor;
|
@taskTextColor: @darkTextColor;
|
||||||
@taskTextOutsideColor: @taskTextLightColor;
|
@taskTextOutsideColor: @taskTextLightColor;
|
||||||
|
|
||||||
@activeTaskBorderColor: rgba(255, 255, 255, 0.5);
|
@activeTaskBorderColor: rgba(255, 255, 255, 0.5);
|
||||||
@activeTaskBkgColor: #81B1DB;
|
@activeTaskBkgColor: #81B1DB;
|
||||||
|
|
||||||
@gridColor: @mainContrastColor;
|
@gridColor: @mainContrastColor;
|
||||||
|
|
||||||
@doneTaskBkgColor: @mainContrastColor;
|
@doneTaskBkgColor: @mainContrastColor;
|
||||||
@doneTaskBorderColor: grey;
|
@doneTaskBorderColor: grey;
|
||||||
|
|
||||||
@critBorderColor: #E83737;
|
@critBorderColor: #E83737;
|
||||||
@critBkgColor: #E83737;
|
@critBkgColor: #E83737;
|
||||||
|
|
||||||
@taskTextLightColor: @mainContrastColor;
|
@taskTextLightColor: @mainContrastColor;
|
||||||
@taskTextDarkColor: @darkTextColor;
|
@taskTextDarkColor: @darkTextColor;
|
||||||
|
|
||||||
@todayLineColor: #DB5757;
|
@todayLineColor: #DB5757;
|
||||||
|
|||||||
@@ -1,56 +1,62 @@
|
|||||||
g.classGroup text {
|
g.classGroup text {
|
||||||
fill:@nodeBorder;
|
fill: @nodeBorder;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial;
|
||||||
font-size: 14px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
g.classGroup rect {
|
g.classGroup rect {
|
||||||
fill:@nodeBkg;
|
fill: @nodeBkg;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
}
|
}
|
||||||
|
|
||||||
g.classGroup line {
|
g.classGroup line {
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg .classLabel .box {
|
svg .classLabel .box {
|
||||||
stroke: none;
|
stroke: none;
|
||||||
stroke-width:0;
|
stroke-width: 0;
|
||||||
fill: @nodeBkg;
|
fill: @nodeBkg;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg .classLabel .label {
|
svg .classLabel .label {
|
||||||
fill: @nodeBorder;
|
fill: @nodeBorder;
|
||||||
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.relation {
|
.relation {
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
fill:none;
|
fill: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.composition{
|
.composition {
|
||||||
fill : @nodeBorder;
|
fill: @nodeBorder;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#compositionStart {
|
#compositionStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#compositionEnd {
|
#compositionEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
.aggregation{
|
|
||||||
fill : @nodeBkg;
|
.aggregation {
|
||||||
|
fill: @nodeBkg;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aggregationStart {
|
#aggregationStart {
|
||||||
.aggregation;
|
.aggregation;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aggregationEnd {
|
#aggregationEnd {
|
||||||
.aggregation;
|
.aggregation;
|
||||||
}
|
}
|
||||||
@@ -58,12 +64,15 @@ svg .classLabel .label {
|
|||||||
#dependencyStart {
|
#dependencyStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dependencyEnd {
|
#dependencyEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#extensionStart {
|
#extensionStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#extensionEnd {
|
#extensionEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
@@ -1,11 +1,13 @@
|
|||||||
.mermaid .label { color:#333}
|
.mermaid .label {
|
||||||
|
color: #333
|
||||||
|
}
|
||||||
|
|
||||||
.node rect,
|
.node rect,
|
||||||
.node circle,
|
.node circle,
|
||||||
.node ellipse,
|
.node ellipse,
|
||||||
.node polygon {
|
.node polygon {
|
||||||
fill: @mainBkg;
|
fill: @mainBkg;
|
||||||
stroke: @nodeBorder;
|
stroke: @border1;
|
||||||
stroke-width: 1px;
|
stroke-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -21,13 +23,13 @@
|
|||||||
background-color: @edgeLabelBackground;
|
background-color: @edgeLabelBackground;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cluster rect{
|
.cluster rect {
|
||||||
fill: @secondBkg !important;
|
fill: @secondBkg !important;
|
||||||
rx:4 !important;
|
rx: 4 !important;
|
||||||
stroke: @clusterBorder !important;
|
stroke: @clusterBorder !important;
|
||||||
stroke-width: 1px !important;
|
stroke-width: 1px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cluster text {
|
.cluster text {
|
||||||
fill:@titleColor;
|
fill: @titleColor;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,138 +1,209 @@
|
|||||||
/** Section styling */
|
/** Section styling */
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
stroke:none;
|
stroke: none;
|
||||||
opacity:0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
.section0{
|
|
||||||
fill:@sectionBkgColor;
|
.section0 {
|
||||||
|
fill: @sectionBkgColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section2 {
|
.section2 {
|
||||||
fill:@sectionBkgColor2;
|
fill: @sectionBkgColor2;
|
||||||
}
|
|
||||||
.section1,.section3 {
|
|
||||||
fill:@altSectionBkgColor;
|
|
||||||
opacity:0.2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionTitle0 { fill:@titleColor;}
|
.section1,
|
||||||
.sectionTitle1 { fill:@titleColor;}
|
.section3 {
|
||||||
.sectionTitle2 { fill:@titleColor;}
|
fill: @altSectionBkgColor;
|
||||||
.sectionTitle3 { fill:@titleColor;}
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle0 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle1 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle2 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle3 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
.sectionTitle {
|
.sectionTitle {
|
||||||
text-anchor:start;
|
text-anchor: start;
|
||||||
font-size:11px;
|
font-size: 11px;
|
||||||
text-height:14px;
|
text-height: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Grid and axis */
|
/* Grid and axis */
|
||||||
|
|
||||||
.grid .tick {
|
.grid .tick {
|
||||||
stroke: @gridColor;
|
stroke: @gridColor;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
shape-rendering: crispEdges;
|
shape-rendering: crispEdges;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid path {
|
.grid path {
|
||||||
stroke-width: 0;
|
stroke-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Today line */
|
/* Today line */
|
||||||
|
|
||||||
.today {
|
.today {
|
||||||
fill:none;
|
fill: none;
|
||||||
stroke:@todayLineColor;
|
stroke: @todayLineColor;
|
||||||
stroke-width:2px;
|
stroke-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Task styling */
|
/* Task styling */
|
||||||
|
|
||||||
|
|
||||||
/* Default task */
|
/* Default task */
|
||||||
|
|
||||||
.task {
|
.task {
|
||||||
stroke-width:2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskText {
|
.taskText {
|
||||||
text-anchor:middle;
|
text-anchor: middle;
|
||||||
font-size:11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutsideRight {
|
.taskTextOutsideRight {
|
||||||
fill:@taskTextDarkColor;
|
fill: @taskTextDarkColor;
|
||||||
text-anchor:start;
|
text-anchor: start;
|
||||||
font-size:11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutsideLeft {
|
.taskTextOutsideLeft {
|
||||||
fill:@taskTextDarkColor;
|
fill: @taskTextDarkColor;
|
||||||
text-anchor:end;
|
text-anchor: end;
|
||||||
font-size:11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Specific task settings for the sections*/
|
/* Specific task settings for the sections*/
|
||||||
|
|
||||||
.taskText0, .taskText1, .taskText2, .taskText3 {
|
.taskText0,
|
||||||
fill:@taskTextColor;
|
.taskText1,
|
||||||
|
.taskText2,
|
||||||
|
.taskText3 {
|
||||||
|
fill: @taskTextColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task0, .task1, .task2, .task3 {
|
.task0,
|
||||||
|
.task1,
|
||||||
|
.task2,
|
||||||
|
.task3 {
|
||||||
fill: @taskBkgColor;
|
fill: @taskBkgColor;
|
||||||
stroke: @taskBorderColor;
|
stroke: @taskBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutside0,.taskTextOutside2, {
|
.taskTextOutside0,
|
||||||
fill:@taskTextOutsideColor;
|
.taskTextOutside2,
|
||||||
}
|
{
|
||||||
.taskTextOutside1, .taskTextOutside3 {
|
fill: @taskTextOutsideColor;
|
||||||
fill:@taskTextOutsideColor;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.taskTextOutside1,
|
||||||
|
.taskTextOutside3 {
|
||||||
|
fill: @taskTextOutsideColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Active task */
|
/* Active task */
|
||||||
.active0, .active1, .active2, .active3 {
|
|
||||||
|
.active0,
|
||||||
|
.active1,
|
||||||
|
.active2,
|
||||||
|
.active3 {
|
||||||
fill: @activeTaskBkgColor;
|
fill: @activeTaskBkgColor;
|
||||||
stroke: @activeTaskBorderColor;
|
stroke: @activeTaskBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activeText0, .activeText1, .activeText2, .activeText3 {
|
.activeText0,
|
||||||
fill:@taskTextDarkColor !important;
|
.activeText1,
|
||||||
}
|
.activeText2,
|
||||||
/* Completed task */
|
.activeText3 {
|
||||||
.done0, .done1, .done2, .done3 {
|
fill: @taskTextDarkColor !important;
|
||||||
stroke:@doneTaskBorderColor;
|
|
||||||
fill: @doneTaskBkgColor;
|
|
||||||
stroke-width:2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.doneText0, .doneText1, .doneText2, .doneText3 {
|
|
||||||
fill:@taskTextDarkColor !important;
|
/* Completed task */
|
||||||
|
|
||||||
|
.done0,
|
||||||
|
.done1,
|
||||||
|
.done2,
|
||||||
|
.done3 {
|
||||||
|
stroke: @doneTaskBorderColor;
|
||||||
|
fill: @doneTaskBkgColor;
|
||||||
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.doneText0,
|
||||||
|
.doneText1,
|
||||||
|
.doneText2,
|
||||||
|
.doneText3 {
|
||||||
|
fill: @taskTextDarkColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Tasks on the critical line */
|
/* Tasks on the critical line */
|
||||||
.crit0, .crit1, .crit2, .crit3 {
|
|
||||||
stroke:@critBorderColor;
|
.crit0,
|
||||||
|
.crit1,
|
||||||
|
.crit2,
|
||||||
|
.crit3 {
|
||||||
|
stroke: @critBorderColor;
|
||||||
fill: @critBkgColor;
|
fill: @critBkgColor;
|
||||||
stroke-width:2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
|
|
||||||
stroke:@critBorderColor;
|
.activeCrit0,
|
||||||
|
.activeCrit1,
|
||||||
|
.activeCrit2,
|
||||||
|
.activeCrit3 {
|
||||||
|
stroke: @critBorderColor;
|
||||||
fill: @activeTaskBkgColor;
|
fill: @activeTaskBkgColor;
|
||||||
stroke-width:2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
|
|
||||||
stroke:@critBorderColor;
|
.doneCrit0,
|
||||||
|
.doneCrit1,
|
||||||
|
.doneCrit2,
|
||||||
|
.doneCrit3 {
|
||||||
|
stroke: @critBorderColor;
|
||||||
fill: @doneTaskBkgColor;
|
fill: @doneTaskBkgColor;
|
||||||
stroke-width:2;
|
stroke-width: 2;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
shape-rendering: crispEdges;
|
shape-rendering: crispEdges;
|
||||||
}
|
}
|
||||||
.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
|
|
||||||
fill:@taskTextDarkColor !important;
|
.doneCritText0,
|
||||||
|
.doneCritText1,
|
||||||
|
.doneCritText2,
|
||||||
|
.doneCritText3 {
|
||||||
|
fill: @taskTextDarkColor !important;
|
||||||
}
|
}
|
||||||
.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
|
|
||||||
fill:@taskTextDarkColor !important;
|
.activeCritText0,
|
||||||
|
.activeCritText1,
|
||||||
|
.activeCritText2,
|
||||||
|
.activeCritText3 {
|
||||||
|
fill: @taskTextDarkColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titleText {
|
.titleText {
|
||||||
text-anchor:middle;
|
text-anchor: middle;
|
||||||
font-size:18px;
|
font-size: 18px;
|
||||||
fill:@taskTextDarkColor;
|
fill: @taskTextDarkColor;
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|||||||
@@ -3,10 +3,9 @@
|
|||||||
@import "sequenceDiagram";
|
@import "sequenceDiagram";
|
||||||
@import "gantt";
|
@import "gantt";
|
||||||
@import "classDiagram";
|
@import "classDiagram";
|
||||||
|
|
||||||
.node text {
|
.node text {
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial;
|
||||||
font-size:14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.mermaidTooltip {
|
div.mermaidTooltip {
|
||||||
@@ -20,5 +19,5 @@ div.mermaidTooltip {
|
|||||||
border: 1px solid @border2;
|
border: 1px solid @border2;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index:100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
@@ -1,42 +1,42 @@
|
|||||||
|
|
||||||
|
|
||||||
.actor {
|
.actor {
|
||||||
stroke: @actorBorder;
|
stroke: @actorBorder;
|
||||||
fill: @actorBkg;
|
fill: @actorBkg;
|
||||||
}
|
}
|
||||||
|
|
||||||
text.actor {
|
text.actor {
|
||||||
fill:@actorTextColor;
|
fill: @actorTextColor;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actor-line {
|
.actor-line {
|
||||||
stroke:@actorLineColor;
|
stroke: @actorLineColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageLine0 {
|
.messageLine0 {
|
||||||
stroke-width:1.5;
|
stroke-width: 1.5;
|
||||||
stroke-dasharray: "2 2";
|
stroke-dasharray: "2 2";
|
||||||
marker-end:"url(#arrowhead)";
|
marker-end: "url(#arrowhead)";
|
||||||
stroke:@signalColor;
|
stroke: @signalColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageLine1 {
|
.messageLine1 {
|
||||||
stroke-width:1.5;
|
stroke-width: 1.5;
|
||||||
stroke-dasharray: "2 2";
|
stroke-dasharray: "2 2";
|
||||||
stroke:@signalColor;
|
stroke: @signalColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
#arrowhead {
|
#arrowhead {
|
||||||
fill:@signalColor;
|
fill: @signalColor;
|
||||||
}
|
}
|
||||||
#crosshead path {
|
|
||||||
fill:@signalColor !important;
|
|
||||||
stroke: @signalColor !important;
|
|
||||||
|
|
||||||
|
#crosshead path {
|
||||||
|
fill: @signalColor !important;
|
||||||
|
stroke: @signalColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageText {
|
.messageText {
|
||||||
fill:@signalTextColor;
|
fill: @signalTextColor;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.labelBox {
|
.labelBox {
|
||||||
@@ -45,19 +45,19 @@ text.actor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.labelText {
|
.labelText {
|
||||||
fill:@labelTextColor;
|
fill: @labelTextColor;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loopText {
|
.loopText {
|
||||||
fill:@labelTextColor;
|
fill: @labelTextColor;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loopLine {
|
.loopLine {
|
||||||
stroke-width:2;
|
stroke-width: 2;
|
||||||
stroke-dasharray: "2 2";
|
stroke-dasharray: "2 2";
|
||||||
marker-end:"url(#arrowhead)";
|
marker-end: "url(#arrowhead)";
|
||||||
stroke: @labelBoxBorderColor;
|
stroke: @labelBoxBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -68,8 +68,8 @@ text.actor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.noteText {
|
.noteText {
|
||||||
fill:black;
|
fill: black;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial;
|
||||||
font-size:14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
@@ -1,61 +1,50 @@
|
|||||||
@mainBkg: #ECECFF;
|
@mainBkg: #ECECFF;
|
||||||
@secondBkg: #ffffde;
|
@secondBkg: #ffffde;
|
||||||
@lineColor: #333333;
|
@lineColor: #333333;
|
||||||
@border1:#CCCCFF;
|
@border1: #CCCCFF;
|
||||||
@border2:#aaaa33;
|
@border2: #aaaa33;
|
||||||
@arrowheadColor: #333333;
|
@arrowheadColor: #333333;
|
||||||
|
|
||||||
/* Flowchart variables */
|
/* Flowchart variables */
|
||||||
@nodeBkg:@mainBkg;
|
|
||||||
@nodeBorder:@border1;
|
|
||||||
|
|
||||||
@clusterBkg:@secondBkg;
|
|
||||||
@clusterBorder:@border2;
|
|
||||||
|
|
||||||
@defaultLinkColor:@lineColor;
|
|
||||||
|
|
||||||
|
@nodeBkg: @mainBkg;
|
||||||
|
@nodeBorder: #9370DB;
|
||||||
|
@clusterBkg: @secondBkg;
|
||||||
|
@clusterBorder: @border2;
|
||||||
|
@defaultLinkColor: @lineColor;
|
||||||
@titleColor: #333;
|
@titleColor: #333;
|
||||||
|
|
||||||
@edgeLabelBackground: #e8e8e8;
|
@edgeLabelBackground: #e8e8e8;
|
||||||
|
|
||||||
/* Sequence Diagram variables */
|
/* Sequence Diagram variables */
|
||||||
|
|
||||||
@actorBorder: @border1;
|
@actorBorder: @border1;
|
||||||
@actorBkg: @mainBkg;
|
@actorBkg: @mainBkg;
|
||||||
@actorTextColor: black;
|
@actorTextColor: black;
|
||||||
@actorLineColor: grey;
|
@actorLineColor: grey;
|
||||||
|
|
||||||
@signalColor: #333;
|
@signalColor: #333;
|
||||||
@signalTextColor: #333;
|
@signalTextColor: #333;
|
||||||
|
|
||||||
@labelBoxBkgColor: @actorBkg;
|
@labelBoxBkgColor: @actorBkg;
|
||||||
@labelBoxBorderColor: @actorBorder;
|
@labelBoxBorderColor: @actorBorder;
|
||||||
@labelTextColor: @actorTextColor;
|
@labelTextColor: @actorTextColor;
|
||||||
|
|
||||||
@noteBorderColor: @border2;
|
@noteBorderColor: @border2;
|
||||||
@noteBkgColor: #fff5ad;
|
@noteBkgColor: #fff5ad;
|
||||||
|
|
||||||
/* Gantt chart variables */
|
/* Gantt chart variables */
|
||||||
|
|
||||||
@sectionBkgColor: rgba(102, 102, 255, 0.49);
|
@sectionBkgColor: rgba(102, 102, 255, 0.49);
|
||||||
@altSectionBkgColor: white;
|
@altSectionBkgColor: white;
|
||||||
@sectionBkgColor2: #fff400;
|
@sectionBkgColor2: #fff400;
|
||||||
|
|
||||||
@taskBorderColor: #534fbc;
|
@taskBorderColor: #534fbc;
|
||||||
@taskBkgColor: #8a90dd;
|
@taskBkgColor: #8a90dd;
|
||||||
@taskTextColor: @taskTextLightColor;
|
@taskTextColor: @taskTextLightColor;
|
||||||
@taskTextOutsideColor: @taskTextDarkColor;
|
@taskTextOutsideColor: @taskTextDarkColor;
|
||||||
|
|
||||||
@activeTaskBorderColor: #534fbc;
|
@activeTaskBorderColor: #534fbc;
|
||||||
@activeTaskBkgColor: #bfc7ff;
|
@activeTaskBkgColor: #bfc7ff;
|
||||||
|
|
||||||
@gridColor: lightgrey;
|
@gridColor: lightgrey;
|
||||||
|
|
||||||
@doneTaskBkgColor: lightgrey;
|
@doneTaskBkgColor: lightgrey;
|
||||||
@doneTaskBorderColor: grey;
|
@doneTaskBorderColor: grey;
|
||||||
|
|
||||||
@critBorderColor: #ff8888;
|
@critBorderColor: #ff8888;
|
||||||
@critBkgColor: red;
|
@critBkgColor: red;
|
||||||
|
|
||||||
@taskTextLightColor: white;
|
@taskTextLightColor: white;
|
||||||
@taskTextDarkColor: black;
|
@taskTextDarkColor: black;
|
||||||
|
|
||||||
@todayLineColor: red;
|
@todayLineColor: red;
|
||||||
@@ -1,56 +1,62 @@
|
|||||||
g.classGroup text {
|
g.classGroup text {
|
||||||
fill:@nodeBorder;
|
fill: @nodeBorder;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial;
|
||||||
font-size: 14px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
g.classGroup rect {
|
g.classGroup rect {
|
||||||
fill:@nodeBkg;
|
fill: @nodeBkg;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
}
|
}
|
||||||
|
|
||||||
g.classGroup line {
|
g.classGroup line {
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg .classLabel .box {
|
svg .classLabel .box {
|
||||||
stroke: none;
|
stroke: none;
|
||||||
stroke-width:0;
|
stroke-width: 0;
|
||||||
fill: @nodeBkg;
|
fill: @nodeBkg;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg .classLabel .label {
|
svg .classLabel .label {
|
||||||
fill: @nodeBorder;
|
fill: @nodeBorder;
|
||||||
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.relation {
|
.relation {
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
fill:none;
|
fill: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.composition{
|
.composition {
|
||||||
fill : @nodeBorder;
|
fill: @nodeBorder;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#compositionStart {
|
#compositionStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#compositionEnd {
|
#compositionEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
.aggregation{
|
|
||||||
fill : @nodeBkg;
|
.aggregation {
|
||||||
|
fill: @nodeBkg;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aggregationStart {
|
#aggregationStart {
|
||||||
.aggregation;
|
.aggregation;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aggregationEnd {
|
#aggregationEnd {
|
||||||
.aggregation;
|
.aggregation;
|
||||||
}
|
}
|
||||||
@@ -58,12 +64,15 @@ svg .classLabel .label {
|
|||||||
#dependencyStart {
|
#dependencyStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dependencyEnd {
|
#dependencyEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#extensionStart {
|
#extensionStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#extensionEnd {
|
#extensionEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
.mermaid .label {
|
.mermaid .label {
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial;
|
||||||
color:#333
|
color: #333
|
||||||
}
|
}
|
||||||
|
|
||||||
.node rect,
|
.node rect,
|
||||||
@@ -25,13 +25,13 @@ color:#333
|
|||||||
background-color: @edgeLabelBackground;
|
background-color: @edgeLabelBackground;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cluster rect{
|
.cluster rect {
|
||||||
fill: @secondBkg !important;
|
fill: @secondBkg !important;
|
||||||
rx:4 !important;
|
rx: 4 !important;
|
||||||
stroke: @clusterBorder !important;
|
stroke: @clusterBorder !important;
|
||||||
stroke-width: 1px !important;
|
stroke-width: 1px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cluster text {
|
.cluster text {
|
||||||
fill:@titleColor;
|
fill: @titleColor;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,138 +1,209 @@
|
|||||||
/** Section styling */
|
/** Section styling */
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
stroke:none;
|
stroke: none;
|
||||||
opacity:0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
.section0{
|
|
||||||
fill:@sectionBkgColor;
|
.section0 {
|
||||||
|
fill: @sectionBkgColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section2 {
|
.section2 {
|
||||||
fill:@sectionBkgColor2;
|
fill: @sectionBkgColor2;
|
||||||
}
|
|
||||||
.section1,.section3 {
|
|
||||||
fill:@altSectionBkgColor;
|
|
||||||
opacity:0.2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionTitle0 { fill:@titleColor;}
|
.section1,
|
||||||
.sectionTitle1 { fill:@titleColor;}
|
.section3 {
|
||||||
.sectionTitle2 { fill:@titleColor;}
|
fill: @altSectionBkgColor;
|
||||||
.sectionTitle3 { fill:@titleColor;}
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle0 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle1 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle2 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle3 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
.sectionTitle {
|
.sectionTitle {
|
||||||
text-anchor:start;
|
text-anchor: start;
|
||||||
font-size:11px;
|
font-size: 11px;
|
||||||
text-height:14px;
|
text-height: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Grid and axis */
|
/* Grid and axis */
|
||||||
|
|
||||||
.grid .tick {
|
.grid .tick {
|
||||||
stroke: @gridColor;
|
stroke: @gridColor;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
shape-rendering: crispEdges;
|
shape-rendering: crispEdges;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid path {
|
.grid path {
|
||||||
stroke-width: 0;
|
stroke-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Today line */
|
/* Today line */
|
||||||
|
|
||||||
.today {
|
.today {
|
||||||
fill:none;
|
fill: none;
|
||||||
stroke:@todayLineColor;
|
stroke: @todayLineColor;
|
||||||
stroke-width:2px;
|
stroke-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Task styling */
|
/* Task styling */
|
||||||
|
|
||||||
|
|
||||||
/* Default task */
|
/* Default task */
|
||||||
|
|
||||||
.task {
|
.task {
|
||||||
stroke-width:2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskText {
|
.taskText {
|
||||||
text-anchor:middle;
|
text-anchor: middle;
|
||||||
font-size:11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutsideRight {
|
.taskTextOutsideRight {
|
||||||
fill:@taskTextDarkColor;
|
fill: @taskTextDarkColor;
|
||||||
text-anchor:start;
|
text-anchor: start;
|
||||||
font-size:11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutsideLeft {
|
.taskTextOutsideLeft {
|
||||||
fill:@taskTextDarkColor;
|
fill: @taskTextDarkColor;
|
||||||
text-anchor:end;
|
text-anchor: end;
|
||||||
font-size:11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Specific task settings for the sections*/
|
/* Specific task settings for the sections*/
|
||||||
|
|
||||||
.taskText0, .taskText1, .taskText2, .taskText3 {
|
.taskText0,
|
||||||
fill:@taskTextColor;
|
.taskText1,
|
||||||
|
.taskText2,
|
||||||
|
.taskText3 {
|
||||||
|
fill: @taskTextColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task0, .task1, .task2, .task3 {
|
.task0,
|
||||||
|
.task1,
|
||||||
|
.task2,
|
||||||
|
.task3 {
|
||||||
fill: @taskBkgColor;
|
fill: @taskBkgColor;
|
||||||
stroke: @taskBorderColor;
|
stroke: @taskBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutside0,.taskTextOutside2, {
|
.taskTextOutside0,
|
||||||
fill:@taskTextOutsideColor;
|
.taskTextOutside2,
|
||||||
}
|
{
|
||||||
.taskTextOutside1, .taskTextOutside3 {
|
fill: @taskTextOutsideColor;
|
||||||
fill:@taskTextOutsideColor;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.taskTextOutside1,
|
||||||
|
.taskTextOutside3 {
|
||||||
|
fill: @taskTextOutsideColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Active task */
|
/* Active task */
|
||||||
.active0, .active1, .active2, .active3 {
|
|
||||||
|
.active0,
|
||||||
|
.active1,
|
||||||
|
.active2,
|
||||||
|
.active3 {
|
||||||
fill: @activeTaskBkgColor;
|
fill: @activeTaskBkgColor;
|
||||||
stroke: @activeTaskBorderColor;
|
stroke: @activeTaskBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activeText0, .activeText1, .activeText2, .activeText3 {
|
.activeText0,
|
||||||
fill:@taskTextDarkColor !important;
|
.activeText1,
|
||||||
}
|
.activeText2,
|
||||||
/* Completed task */
|
.activeText3 {
|
||||||
.done0, .done1, .done2, .done3 {
|
fill: @taskTextDarkColor !important;
|
||||||
stroke:@doneTaskBorderColor;
|
|
||||||
fill: @doneTaskBkgColor;
|
|
||||||
stroke-width:2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.doneText0, .doneText1, .doneText2, .doneText3 {
|
|
||||||
fill:@taskTextDarkColor !important;
|
/* Completed task */
|
||||||
|
|
||||||
|
.done0,
|
||||||
|
.done1,
|
||||||
|
.done2,
|
||||||
|
.done3 {
|
||||||
|
stroke: @doneTaskBorderColor;
|
||||||
|
fill: @doneTaskBkgColor;
|
||||||
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.doneText0,
|
||||||
|
.doneText1,
|
||||||
|
.doneText2,
|
||||||
|
.doneText3 {
|
||||||
|
fill: @taskTextDarkColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Tasks on the critical line */
|
/* Tasks on the critical line */
|
||||||
.crit0, .crit1, .crit2, .crit3 {
|
|
||||||
stroke:@critBorderColor;
|
.crit0,
|
||||||
|
.crit1,
|
||||||
|
.crit2,
|
||||||
|
.crit3 {
|
||||||
|
stroke: @critBorderColor;
|
||||||
fill: @critBkgColor;
|
fill: @critBkgColor;
|
||||||
stroke-width:2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
|
|
||||||
stroke:@critBorderColor;
|
.activeCrit0,
|
||||||
|
.activeCrit1,
|
||||||
|
.activeCrit2,
|
||||||
|
.activeCrit3 {
|
||||||
|
stroke: @critBorderColor;
|
||||||
fill: @activeTaskBkgColor;
|
fill: @activeTaskBkgColor;
|
||||||
stroke-width:2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
|
|
||||||
stroke:@critBorderColor;
|
.doneCrit0,
|
||||||
|
.doneCrit1,
|
||||||
|
.doneCrit2,
|
||||||
|
.doneCrit3 {
|
||||||
|
stroke: @critBorderColor;
|
||||||
fill: @doneTaskBkgColor;
|
fill: @doneTaskBkgColor;
|
||||||
stroke-width:2;
|
stroke-width: 2;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
shape-rendering: crispEdges;
|
shape-rendering: crispEdges;
|
||||||
}
|
}
|
||||||
.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
|
|
||||||
fill:@taskTextDarkColor !important;
|
.doneCritText0,
|
||||||
|
.doneCritText1,
|
||||||
|
.doneCritText2,
|
||||||
|
.doneCritText3 {
|
||||||
|
fill: @taskTextDarkColor !important;
|
||||||
}
|
}
|
||||||
.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
|
|
||||||
fill:@taskTextDarkColor !important;
|
.activeCritText0,
|
||||||
|
.activeCritText1,
|
||||||
|
.activeCritText2,
|
||||||
|
.activeCritText3 {
|
||||||
|
fill: @taskTextDarkColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titleText {
|
.titleText {
|
||||||
text-anchor:middle;
|
text-anchor: middle;
|
||||||
font-size:18px;
|
font-size: 18px;
|
||||||
fill:@taskTextDarkColor;
|
fill: @taskTextDarkColor;
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|||||||
@@ -3,10 +3,9 @@
|
|||||||
@import "sequenceDiagram";
|
@import "sequenceDiagram";
|
||||||
@import "gantt";
|
@import "gantt";
|
||||||
@import "classDiagram";
|
@import "classDiagram";
|
||||||
|
|
||||||
.node text {
|
.node text {
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial;
|
||||||
font-size:14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.mermaidTooltip {
|
div.mermaidTooltip {
|
||||||
@@ -20,5 +19,5 @@ div.mermaidTooltip {
|
|||||||
border: 1px solid @border2;
|
border: 1px solid @border2;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index:100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
@@ -1,42 +1,42 @@
|
|||||||
|
|
||||||
|
|
||||||
.actor {
|
.actor {
|
||||||
stroke: @actorBorder;
|
stroke: @actorBorder;
|
||||||
fill: @actorBkg;
|
fill: @actorBkg;
|
||||||
}
|
}
|
||||||
|
|
||||||
text.actor {
|
text.actor {
|
||||||
fill:@actorTextColor;
|
fill: @actorTextColor;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actor-line {
|
.actor-line {
|
||||||
stroke:@actorLineColor;
|
stroke: @actorLineColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageLine0 {
|
.messageLine0 {
|
||||||
stroke-width:1.5;
|
stroke-width: 1.5;
|
||||||
stroke-dasharray: "2 2";
|
stroke-dasharray: "2 2";
|
||||||
marker-end:"url(#arrowhead)";
|
marker-end: "url(#arrowhead)";
|
||||||
stroke:@signalColor;
|
stroke: @signalColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageLine1 {
|
.messageLine1 {
|
||||||
stroke-width:1.5;
|
stroke-width: 1.5;
|
||||||
stroke-dasharray: "2 2";
|
stroke-dasharray: "2 2";
|
||||||
stroke:@signalColor;
|
stroke: @signalColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
#arrowhead {
|
#arrowhead {
|
||||||
fill:@signalColor;
|
fill: @signalColor;
|
||||||
}
|
}
|
||||||
#crosshead path {
|
|
||||||
fill:@signalColor !important;
|
|
||||||
stroke: @signalColor !important;
|
|
||||||
|
|
||||||
|
#crosshead path {
|
||||||
|
fill: @signalColor !important;
|
||||||
|
stroke: @signalColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageText {
|
.messageText {
|
||||||
fill:@signalTextColor;
|
fill: @signalTextColor;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.labelBox {
|
.labelBox {
|
||||||
@@ -45,19 +45,19 @@ text.actor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.labelText {
|
.labelText {
|
||||||
fill:@labelTextColor;
|
fill: @labelTextColor;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loopText {
|
.loopText {
|
||||||
fill:@labelTextColor;
|
fill: @labelTextColor;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loopLine {
|
.loopLine {
|
||||||
stroke-width:2;
|
stroke-width: 2;
|
||||||
stroke-dasharray: "2 2";
|
stroke-dasharray: "2 2";
|
||||||
marker-end:"url(#arrowhead)";
|
marker-end: "url(#arrowhead)";
|
||||||
stroke: @labelBoxBorderColor;
|
stroke: @labelBoxBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -68,8 +68,8 @@ text.actor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.noteText {
|
.noteText {
|
||||||
fill:black;
|
fill: black;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial;
|
||||||
font-size:14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
@@ -7,56 +7,46 @@
|
|||||||
@arrowheadColor: green;
|
@arrowheadColor: green;
|
||||||
|
|
||||||
/* Flowchart variables */
|
/* Flowchart variables */
|
||||||
@nodeBkg:@mainBkg;
|
|
||||||
@nodeBorder:@border1;
|
|
||||||
|
|
||||||
@clusterBkg:@secondBkg;
|
|
||||||
@clusterBorder:@border2;
|
|
||||||
|
|
||||||
@defaultLinkColor:@lineColor;
|
|
||||||
|
|
||||||
|
@nodeBkg: @mainBkg;
|
||||||
|
@nodeBorder: @border1;
|
||||||
|
@clusterBkg: @secondBkg;
|
||||||
|
@clusterBorder: @border2;
|
||||||
|
@defaultLinkColor: @lineColor;
|
||||||
@titleColor: #333;
|
@titleColor: #333;
|
||||||
|
|
||||||
@edgeLabelBackground: #e8e8e8;
|
@edgeLabelBackground: #e8e8e8;
|
||||||
|
|
||||||
/* Sequence Diagram variables */
|
/* Sequence Diagram variables */
|
||||||
|
|
||||||
@actorBorder: @border1;
|
@actorBorder: @border1;
|
||||||
@actorBkg: @mainBkg;
|
@actorBkg: @mainBkg;
|
||||||
@actorTextColor: black;
|
@actorTextColor: black;
|
||||||
@actorLineColor: grey;
|
@actorLineColor: grey;
|
||||||
|
|
||||||
@signalColor: #333;
|
@signalColor: #333;
|
||||||
@signalTextColor: #333;
|
@signalTextColor: #333;
|
||||||
|
|
||||||
@labelBoxBkgColor: @actorBkg;
|
@labelBoxBkgColor: @actorBkg;
|
||||||
@labelBoxBorderColor: #326932;
|
@labelBoxBorderColor: #326932;
|
||||||
@labelTextColor: @actorTextColor;
|
@labelTextColor: @actorTextColor;
|
||||||
|
|
||||||
@noteBorderColor: @border2;
|
@noteBorderColor: @border2;
|
||||||
@noteBkgColor: #fff5ad;
|
@noteBkgColor: #fff5ad;
|
||||||
|
|
||||||
/* Gantt chart variables */
|
/* Gantt chart variables */
|
||||||
@sectionBkgColor: #6eaa49;;
|
|
||||||
|
@sectionBkgColor: #6eaa49;
|
||||||
|
;
|
||||||
@altSectionBkgColor: white;
|
@altSectionBkgColor: white;
|
||||||
@sectionBkgColor2: #6eaa49;
|
@sectionBkgColor2: #6eaa49;
|
||||||
|
|
||||||
@taskBorderColor: @border1;
|
@taskBorderColor: @border1;
|
||||||
@taskBkgColor: #487e3a;
|
@taskBkgColor: #487e3a;
|
||||||
@taskTextColor: @taskTextLightColor;
|
@taskTextColor: @taskTextLightColor;
|
||||||
@taskTextOutsideColor: @taskTextDarkColor;
|
@taskTextOutsideColor: @taskTextDarkColor;
|
||||||
|
|
||||||
@activeTaskBorderColor: @taskBorderColor;
|
@activeTaskBorderColor: @taskBorderColor;
|
||||||
@activeTaskBkgColor: @mainBkg;
|
@activeTaskBkgColor: @mainBkg;
|
||||||
|
|
||||||
@gridColor: lightgrey;
|
@gridColor: lightgrey;
|
||||||
|
|
||||||
@doneTaskBkgColor: lightgrey;
|
@doneTaskBkgColor: lightgrey;
|
||||||
@doneTaskBorderColor: grey;
|
@doneTaskBorderColor: grey;
|
||||||
|
|
||||||
@critBorderColor: #ff8888;
|
@critBorderColor: #ff8888;
|
||||||
@critBkgColor: red;
|
@critBkgColor: red;
|
||||||
|
|
||||||
@taskTextLightColor: white;
|
@taskTextLightColor: white;
|
||||||
@taskTextDarkColor: black;
|
@taskTextDarkColor: black;
|
||||||
|
|
||||||
@todayLineColor: red;
|
@todayLineColor: red;
|
||||||
@@ -1,56 +1,62 @@
|
|||||||
g.classGroup text {
|
g.classGroup text {
|
||||||
fill: @nodeBorder;
|
fill: @nodeBorder;
|
||||||
stroke:none;
|
stroke: none;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: 'trebuchet ms', verdana, arial;
|
||||||
font-size: 14px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
g.classGroup rect {
|
g.classGroup rect {
|
||||||
fill:@nodeBkg;
|
fill: @nodeBkg;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
}
|
}
|
||||||
|
|
||||||
g.classGroup line {
|
g.classGroup line {
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg .classLabel .box {
|
svg .classLabel .box {
|
||||||
stroke: none;
|
stroke: none;
|
||||||
stroke-width:0;
|
stroke-width: 0;
|
||||||
fill: @nodeBkg;
|
fill: @nodeBkg;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg .classLabel .label {
|
svg .classLabel .label {
|
||||||
fill: @nodeBorder;
|
fill: @nodeBorder;
|
||||||
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.relation {
|
.relation {
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
fill:none;
|
fill: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.composition{
|
.composition {
|
||||||
fill : @nodeBorder;
|
fill: @nodeBorder;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#compositionStart {
|
#compositionStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#compositionEnd {
|
#compositionEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
.aggregation{
|
|
||||||
fill : @nodeBkg;
|
.aggregation {
|
||||||
|
fill: @nodeBkg;
|
||||||
stroke: @nodeBorder;
|
stroke: @nodeBorder;
|
||||||
stroke-width:1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aggregationStart {
|
#aggregationStart {
|
||||||
.aggregation;
|
.aggregation;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aggregationEnd {
|
#aggregationEnd {
|
||||||
.aggregation;
|
.aggregation;
|
||||||
}
|
}
|
||||||
@@ -58,12 +64,15 @@ svg .classLabel .label {
|
|||||||
#dependencyStart {
|
#dependencyStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dependencyEnd {
|
#dependencyEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#extensionStart {
|
#extensionStart {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#extensionEnd {
|
#extensionEnd {
|
||||||
.composition;
|
.composition;
|
||||||
}
|
}
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
.mermaid .label { color: @text }
|
.mermaid .label {
|
||||||
|
color: @text
|
||||||
|
}
|
||||||
|
|
||||||
.node rect,
|
.node rect,
|
||||||
.node circle,
|
.node circle,
|
||||||
|
|||||||
@@ -1,24 +1,39 @@
|
|||||||
/** Section styling */
|
/** Section styling */
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
stroke: none;
|
stroke: none;
|
||||||
opacity:0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
.section0{
|
|
||||||
|
.section0 {
|
||||||
fill: @sectionBkgColor;
|
fill: @sectionBkgColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section2 {
|
.section2 {
|
||||||
fill: @sectionBkgColor2;
|
fill: @sectionBkgColor2;
|
||||||
}
|
}
|
||||||
.section1,.section3 {
|
|
||||||
|
.section1,
|
||||||
|
.section3 {
|
||||||
fill: @altSectionBkgColor;
|
fill: @altSectionBkgColor;
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionTitle0 { fill: @titleColor;}
|
.sectionTitle0 {
|
||||||
.sectionTitle1 { fill: @titleColor;}
|
fill: @titleColor;
|
||||||
.sectionTitle2 { fill: @titleColor;}
|
}
|
||||||
.sectionTitle3 { fill: @titleColor;}
|
|
||||||
|
|
||||||
|
.sectionTitle1 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle2 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle3 {
|
||||||
|
fill: @titleColor;
|
||||||
|
}
|
||||||
|
|
||||||
.sectionTitle {
|
.sectionTitle {
|
||||||
text-anchor: start;
|
text-anchor: start;
|
||||||
@@ -26,25 +41,34 @@
|
|||||||
text-height: 14px;
|
text-height: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Grid and axis */
|
/* Grid and axis */
|
||||||
|
|
||||||
.grid .tick {
|
.grid .tick {
|
||||||
stroke: @gridColor;
|
stroke: @gridColor;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
shape-rendering: crispEdges;
|
shape-rendering: crispEdges;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid path {
|
.grid path {
|
||||||
stroke-width: 0;
|
stroke-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Today line */
|
/* Today line */
|
||||||
|
|
||||||
.today {
|
.today {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: @todayLineColor;
|
stroke: @todayLineColor;
|
||||||
stroke-width: 2px;
|
stroke-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Task styling */
|
/* Task styling */
|
||||||
|
|
||||||
|
|
||||||
/* Default task */
|
/* Default task */
|
||||||
|
|
||||||
.task {
|
.task {
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
@@ -53,77 +77,127 @@
|
|||||||
text-anchor: middle;
|
text-anchor: middle;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutsideRight {
|
.taskTextOutsideRight {
|
||||||
fill: @taskTextDarkColor;
|
fill: @taskTextDarkColor;
|
||||||
text-anchor: start;
|
text-anchor: start;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutsideLeft {
|
.taskTextOutsideLeft {
|
||||||
fill: @taskTextDarkColor;
|
fill: @taskTextDarkColor;
|
||||||
text-anchor: end;
|
text-anchor: end;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Specific task settings for the sections*/
|
/* Specific task settings for the sections*/
|
||||||
|
|
||||||
.taskText0, .taskText1, .taskText2, .taskText3 {
|
.taskText0,
|
||||||
|
.taskText1,
|
||||||
|
.taskText2,
|
||||||
|
.taskText3 {
|
||||||
fill: @taskTextColor;
|
fill: @taskTextColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task0, .task1, .task2, .task3 {
|
.task0,
|
||||||
|
.task1,
|
||||||
|
.task2,
|
||||||
|
.task3 {
|
||||||
fill: @taskBkgColor;
|
fill: @taskBkgColor;
|
||||||
stroke: @taskBorderColor;
|
stroke: @taskBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taskTextOutside0,.taskTextOutside2, {
|
.taskTextOutside0,
|
||||||
fill: @taskTextOutsideColor;
|
.taskTextOutside2,
|
||||||
}
|
{
|
||||||
.taskTextOutside1, .taskTextOutside3 {
|
|
||||||
fill: @taskTextOutsideColor;
|
fill: @taskTextOutsideColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.taskTextOutside1,
|
||||||
|
.taskTextOutside3 {
|
||||||
|
fill: @taskTextOutsideColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Active task */
|
/* Active task */
|
||||||
.active0, .active1, .active2, .active3 {
|
|
||||||
|
.active0,
|
||||||
|
.active1,
|
||||||
|
.active2,
|
||||||
|
.active3 {
|
||||||
fill: @activeTaskBkgColor;
|
fill: @activeTaskBkgColor;
|
||||||
stroke: @activeTaskBorderColor;
|
stroke: @activeTaskBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activeText0, .activeText1, .activeText2, .activeText3 {
|
.activeText0,
|
||||||
|
.activeText1,
|
||||||
|
.activeText2,
|
||||||
|
.activeText3 {
|
||||||
fill: @taskTextDarkColor !important;
|
fill: @taskTextDarkColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Completed task */
|
/* Completed task */
|
||||||
.done0, .done1, .done2, .done3 {
|
|
||||||
|
.done0,
|
||||||
|
.done1,
|
||||||
|
.done2,
|
||||||
|
.done3 {
|
||||||
stroke: @doneTaskBorderColor;
|
stroke: @doneTaskBorderColor;
|
||||||
fill: @doneTaskBkgColor;
|
fill: @doneTaskBkgColor;
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doneText0, .doneText1, .doneText2, .doneText3 {
|
.doneText0,
|
||||||
|
.doneText1,
|
||||||
|
.doneText2,
|
||||||
|
.doneText3 {
|
||||||
fill: @taskTextDarkColor !important;
|
fill: @taskTextDarkColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Tasks on the critical line */
|
/* Tasks on the critical line */
|
||||||
.crit0, .crit1, .crit2, .crit3 {
|
|
||||||
stroke:@critBorderColor;
|
.crit0,
|
||||||
|
.crit1,
|
||||||
|
.crit2,
|
||||||
|
.crit3 {
|
||||||
|
stroke: @critBorderColor;
|
||||||
fill: @critBkgColor;
|
fill: @critBkgColor;
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
|
|
||||||
|
.activeCrit0,
|
||||||
|
.activeCrit1,
|
||||||
|
.activeCrit2,
|
||||||
|
.activeCrit3 {
|
||||||
stroke: @critBorderColor;
|
stroke: @critBorderColor;
|
||||||
fill: @activeTaskBkgColor;
|
fill: @activeTaskBkgColor;
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
|
|
||||||
|
.doneCrit0,
|
||||||
|
.doneCrit1,
|
||||||
|
.doneCrit2,
|
||||||
|
.doneCrit3 {
|
||||||
stroke: @critBorderColor;
|
stroke: @critBorderColor;
|
||||||
fill: @doneTaskBkgColor;
|
fill: @doneTaskBkgColor;
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
cursor: pointer;
|
cursor: pointer; //shape-rendering: crispEdges;
|
||||||
//shape-rendering: crispEdges;
|
|
||||||
}
|
}
|
||||||
.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
|
|
||||||
|
.doneCritText0,
|
||||||
|
.doneCritText1,
|
||||||
|
.doneCritText2,
|
||||||
|
.doneCritText3 {
|
||||||
fill: @taskTextDarkColor !important;
|
fill: @taskTextDarkColor !important;
|
||||||
}
|
}
|
||||||
.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
|
|
||||||
|
.activeCritText0,
|
||||||
|
.activeCritText1,
|
||||||
|
.activeCritText2,
|
||||||
|
.activeCritText3 {
|
||||||
fill: @taskTextDarkColor !important;
|
fill: @taskTextDarkColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -132,4 +206,3 @@
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
fill: @taskTextDarkColor;
|
fill: @taskTextDarkColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,10 +3,9 @@
|
|||||||
@import "sequenceDiagram";
|
@import "sequenceDiagram";
|
||||||
@import "gantt";
|
@import "gantt";
|
||||||
@import "classDiagram";
|
@import "classDiagram";
|
||||||
|
|
||||||
.node text {
|
.node text {
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
font-size:14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.mermaidTooltip {
|
div.mermaidTooltip {
|
||||||
@@ -20,5 +19,5 @@ div.mermaidTooltip {
|
|||||||
border: 1px solid @border2;
|
border: 1px solid @border2;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index:100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
@@ -1,9 +1,8 @@
|
|||||||
|
|
||||||
|
|
||||||
.actor {
|
.actor {
|
||||||
stroke: @actorBorder;
|
stroke: @actorBorder;
|
||||||
fill: @actorBkg;
|
fill: @actorBkg;
|
||||||
}
|
}
|
||||||
|
|
||||||
text.actor {
|
text.actor {
|
||||||
fill: @actorTextColor;
|
fill: @actorTextColor;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
@@ -29,11 +28,12 @@ text.actor {
|
|||||||
#arrowhead {
|
#arrowhead {
|
||||||
fill: @signalColor;
|
fill: @signalColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
#crosshead path {
|
#crosshead path {
|
||||||
fill: @signalColor !important;
|
fill: @signalColor !important;
|
||||||
stroke: @signalColor !important;
|
stroke: @signalColor !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageText {
|
.messageText {
|
||||||
fill: @signalTextColor;
|
fill: @signalTextColor;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
|
|||||||
@@ -1,66 +1,54 @@
|
|||||||
@mainBkg: #eee;
|
@mainBkg: #eee;
|
||||||
@secondBkg: lighten(@contrast, 55%);
|
@secondBkg: lighten(@contrast, 55%);
|
||||||
@lineColor: #666;
|
@lineColor: #666;
|
||||||
@border1: #999;
|
@border1: #999;
|
||||||
@border2: @contrast;
|
@border2: @contrast;
|
||||||
|
@note: #ffa;
|
||||||
@note: #ffa;
|
@text: #333;
|
||||||
@text: #333;
|
@contrast: #26a;
|
||||||
@contrast: #26a;
|
@critical: #d42;
|
||||||
@critical: #d42;
|
@done: #bbb;
|
||||||
@done: #bbb;
|
|
||||||
|
|
||||||
/* Flowchart variables */
|
/* Flowchart variables */
|
||||||
|
|
||||||
@nodeBkg: @mainBkg;
|
@nodeBkg: @mainBkg;
|
||||||
@nodeBorder: @border1;
|
@nodeBorder: @border1;
|
||||||
|
|
||||||
@clusterBkg: @secondBkg;
|
@clusterBkg: @secondBkg;
|
||||||
@clusterBorder: @border2;
|
@clusterBorder: @border2;
|
||||||
|
|
||||||
@defaultLinkColor: @lineColor;
|
@defaultLinkColor: @lineColor;
|
||||||
|
|
||||||
@titleColor: @text;
|
@titleColor: @text;
|
||||||
|
|
||||||
@edgeLabelBackground: white;
|
@edgeLabelBackground: white;
|
||||||
|
|
||||||
/* Sequence Diagram variables */
|
/* Sequence Diagram variables */
|
||||||
|
|
||||||
@actorBorder: @border1;
|
@actorBorder: @border1;
|
||||||
@actorBkg: @mainBkg;
|
@actorBkg: @mainBkg;
|
||||||
@actorTextColor: @text;
|
@actorTextColor: @text;
|
||||||
@actorLineColor: @lineColor;
|
@actorLineColor: @lineColor;
|
||||||
|
|
||||||
@signalColor: @text;
|
@signalColor: @text;
|
||||||
@signalTextColor: @text;
|
@signalTextColor: @text;
|
||||||
|
@labelBoxBkgColor: @actorBkg;
|
||||||
@labelBoxBkgColor: @contrast;
|
@labelBoxBorderColor: @actorBorder;
|
||||||
@labelBoxBorderColor: @contrast;
|
|
||||||
@labelTextColor: white;
|
@labelTextColor: white;
|
||||||
|
|
||||||
@noteBorderColor: darken(@note, 60%);
|
@noteBorderColor: darken(@note, 60%);
|
||||||
@noteBkgColor: @note;
|
@noteBkgColor: @note;
|
||||||
|
|
||||||
/* Gantt chart variables */
|
/* Gantt chart variables */
|
||||||
|
|
||||||
@sectionBkgColor: lighten(@contrast, 30%);
|
@sectionBkgColor: lighten(@contrast, 30%);
|
||||||
@altSectionBkgColor: white;
|
@altSectionBkgColor: white;
|
||||||
@sectionBkgColor2: lighten(@contrast, 30%);
|
@sectionBkgColor2: lighten(@contrast, 30%);
|
||||||
|
|
||||||
@taskBorderColor: darken(@contrast, 10%);
|
@taskBorderColor: darken(@contrast, 10%);
|
||||||
@taskBkgColor: @contrast;
|
@taskBkgColor: @contrast;
|
||||||
@taskTextColor: @taskTextLightColor;
|
@taskTextColor: @taskTextLightColor;
|
||||||
@taskTextOutsideColor: @taskTextDarkColor;
|
@taskTextOutsideColor: @taskTextDarkColor;
|
||||||
|
|
||||||
@activeTaskBorderColor: @taskBorderColor;
|
@activeTaskBorderColor: @taskBorderColor;
|
||||||
@activeTaskBkgColor: @mainBkg;
|
@activeTaskBkgColor: @mainBkg;
|
||||||
|
|
||||||
@gridColor: lighten(@border1, 30%);
|
@gridColor: lighten(@border1, 30%);
|
||||||
|
|
||||||
@doneTaskBkgColor: @done;
|
@doneTaskBkgColor: @done;
|
||||||
@doneTaskBorderColor: @lineColor;
|
@doneTaskBorderColor: @lineColor;
|
||||||
|
|
||||||
@critBorderColor: darken(@critBkgColor, 10%);
|
@critBorderColor: darken(@critBkgColor, 10%);
|
||||||
@critBkgColor: @critical;
|
@critBkgColor: @critical;
|
||||||
|
|
||||||
@taskTextLightColor: white;
|
@taskTextLightColor: white;
|
||||||
@taskTextDarkColor: @text;
|
@taskTextDarkColor: @text;
|
||||||
|
|
||||||
@todayLineColor: @critBkgColor;
|
@todayLineColor: @critBkgColor;
|
||||||
@@ -64,13 +64,13 @@ describe('when cloning CSS ', function () {
|
|||||||
|
|
||||||
function addStyleToDocument () {
|
function addStyleToDocument () {
|
||||||
var s = document.createElement('style')
|
var s = document.createElement('style')
|
||||||
s.innerHTML = '.node { stroke:#eeeeee; }\n.node-square { stroke:#bbbbbb; }\n'
|
s.innerHTML = '.node { stroke:rgb(238, 238, 238); }\n.node-square { stroke:rgb(187, 187, 187); }\n'
|
||||||
document.body.appendChild(s)
|
document.body.appendChild(s)
|
||||||
}
|
}
|
||||||
|
|
||||||
function addSecondStyleToDocument () {
|
function addSecondStyleToDocument () {
|
||||||
var s = document.createElement('style')
|
var s = document.createElement('style')
|
||||||
s.innerHTML = '.node2 { stroke:#eeeeee; }\n.node-square { stroke:#beb; }\n'
|
s.innerHTML = '.node2 { stroke:rgb(238, 238, 238); }\n.node-square { stroke:#beb; }\n'
|
||||||
document.body.appendChild(s)
|
document.body.appendChild(s)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -146,7 +146,7 @@ describe('when cloning CSS ', function () {
|
|||||||
var svg = generateSVG()
|
var svg = generateSVG()
|
||||||
addStyleToDocument()
|
addStyleToDocument()
|
||||||
utils.cloneCssStyles(svg, {})
|
utils.cloneCssStyles(svg, {})
|
||||||
expect(stylesToArray(svg)).toEqual(['.node { stroke: #eeeeee;}', '.node-square { stroke: #bbbbbb;}'])
|
expect(stylesToArray(svg)).toEqual(['.node { stroke: rgb(238, 238, 238);}', '.node-square { stroke: rgb(187, 187, 187);}'])
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should handle multiple stylesheets in document with classes in SVG', function () {
|
it('should handle multiple stylesheets in document with classes in SVG', function () {
|
||||||
@@ -154,7 +154,7 @@ describe('when cloning CSS ', function () {
|
|||||||
addStyleToDocument()
|
addStyleToDocument()
|
||||||
addSecondStyleToDocument()
|
addSecondStyleToDocument()
|
||||||
utils.cloneCssStyles(svg, {})
|
utils.cloneCssStyles(svg, {})
|
||||||
expect(stylesToArray(svg)).toEqual(['.node { stroke: #eeeeee;}', '.node-square { stroke: #bbbbbb;}', '.node-square { stroke: #bbeebb;}'])
|
expect(stylesToArray(svg)).toEqual(['.node { stroke: rgb(238, 238, 238);}', '.node-square { stroke: rgb(187, 187, 187);}', '.node-square { stroke: rgb(187, 238, 187);}'])
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should handle multiple stylesheets + ignore styles in other mermaid SVG', function () {
|
it('should handle multiple stylesheets + ignore styles in other mermaid SVG', function () {
|
||||||
@@ -163,14 +163,14 @@ describe('when cloning CSS ', function () {
|
|||||||
addSecondStyleToDocument()
|
addSecondStyleToDocument()
|
||||||
addMermaidSVGwithStyleToDocument()
|
addMermaidSVGwithStyleToDocument()
|
||||||
utils.cloneCssStyles(svg, {})
|
utils.cloneCssStyles(svg, {})
|
||||||
expect(stylesToArray(svg)).toEqual(['.node { stroke: #eeeeee;}', '.node-square { stroke: #bbbbbb;}', '.node-square { stroke: #bbeebb;}'])
|
expect(stylesToArray(svg)).toEqual(['.node { stroke: rgb(238, 238, 238);}', '.node-square { stroke: rgb(187, 187, 187);}', '.node-square { stroke: rgb(187, 238, 187);}'])
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should handle a default class together with stylesheet in document with classes in SVG', function () {
|
it('should handle a default class together with stylesheet in document with classes in SVG', function () {
|
||||||
var svg = generateSVG()
|
var svg = generateSVG()
|
||||||
addStyleToDocument()
|
addStyleToDocument()
|
||||||
utils.cloneCssStyles(svg, { 'default': { 'styles': ['stroke:#ffffff', 'stroke-width:1.5px'] } })
|
utils.cloneCssStyles(svg, { 'default': { 'styles': ['stroke:#ffffff', 'stroke-width:1.5px'] } })
|
||||||
expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#ffffff; stroke-width:1.5px; }', '.node { stroke: #eeeeee;}', '.node-square { stroke: #bbbbbb;}'])
|
expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#ffffff; stroke-width:1.5px; }', '.node { stroke: rgb(238, 238, 238);}', '.node-square { stroke: rgb(187, 187, 187);}'])
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should handle a default class together with stylesheet in document and classDefs', function () {
|
it('should handle a default class together with stylesheet in document and classDefs', function () {
|
||||||
@@ -178,13 +178,13 @@ describe('when cloning CSS ', function () {
|
|||||||
addStyleToDocument()
|
addStyleToDocument()
|
||||||
utils.cloneCssStyles(svg, {
|
utils.cloneCssStyles(svg, {
|
||||||
'default': { 'styles': ['stroke:#ffffff', 'stroke-width:1.5px'] },
|
'default': { 'styles': ['stroke:#ffffff', 'stroke-width:1.5px'] },
|
||||||
'node-square': { 'styles': ['fill:#eeeeee', 'stroke:#aaaaaa'] },
|
'node-square': { 'styles': ['fill:rgb(238, 238, 238)', 'stroke:#aaaaaa'] },
|
||||||
'node-circle': { 'styles': ['fill:#444444', 'stroke:#111111'] }
|
'node-circle': { 'styles': ['fill:#444444', 'stroke:#111111'] }
|
||||||
})
|
})
|
||||||
expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#ffffff; stroke-width:1.5px; }',
|
expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#ffffff; stroke-width:1.5px; }',
|
||||||
'.node { stroke: #eeeeee;}',
|
'.node { stroke: rgb(238, 238, 238);}',
|
||||||
'.node-square { stroke: #bbbbbb;}',
|
'.node-square { stroke: rgb(187, 187, 187);}',
|
||||||
'#mermaid-01 .node-square>rect, .node-square>polygon, .node-square>circle, .node-square>ellipse { fill:#eeeeee; stroke:#aaaaaa; }',
|
'#mermaid-01 .node-square>rect, .node-square>polygon, .node-square>circle, .node-square>ellipse { fill:rgb(238, 238, 238); stroke:#aaaaaa; }',
|
||||||
'#mermaid-01 .node-circle>rect, .node-circle>polygon, .node-circle>circle, .node-circle>ellipse { fill:#444444; stroke:#111111; }'
|
'#mermaid-01 .node-circle>rect, .node-circle>polygon, .node-circle>circle, .node-circle>ellipse { fill:#444444; stroke:#111111; }'
|
||||||
])
|
])
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -13,9 +13,6 @@
|
|||||||
});
|
});
|
||||||
$(function(){
|
$(function(){
|
||||||
var graphDefinition = 'graph TB\na-->b';
|
var graphDefinition = 'graph TB\na-->b';
|
||||||
// var cb = function(html){
|
|
||||||
// console.log(html);
|
|
||||||
// }
|
|
||||||
console.log(mermaidAPI.render(graphDefinition));
|
console.log(mermaidAPI.render(graphDefinition));
|
||||||
console.log(mermaidAPI.render('id',graphDefinition));
|
console.log(mermaidAPI.render('id',graphDefinition));
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
background: #fcfcfe;
|
background: #fcfcfe;
|
||||||
font-family: Helvetica;
|
font-family: Helvetica;
|
||||||
}
|
}
|
||||||
.mermaid {
|
|
||||||
/* width:400px;*/
|
|
||||||
}
|
|
||||||
.actor {
|
.actor {
|
||||||
stroke: #CCCCFF;
|
stroke: #CCCCFF;
|
||||||
fill: #ECECFF;
|
fill: #ECECFF;
|
||||||
|
|||||||
@@ -1,6 +0,0 @@
|
|||||||
/**
|
|
||||||
* Created by knut on 14-12-02.
|
|
||||||
*/
|
|
||||||
const mermaid = require('mermaid')
|
|
||||||
|
|
||||||
console.log('Test page! mermaid version' + mermaid.version())
|
|
||||||
@@ -6,10 +6,6 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"gulp": "^3.8.10"
|
"gulp": "^3.8.10"
|
||||||
},
|
},
|
||||||
"devDependencies": {},
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
}
|
}
|
||||||
|
|||||||
20
todo.md
20
todo.md
@@ -1,14 +1,18 @@
|
|||||||
- upgrade d3 to version 4
|
- Upgrade d3 to version 4
|
||||||
- use external d3-textwrap library
|
- Use external d3-textwrap library
|
||||||
- Problem is it's for d3 v4 only
|
- Problem is it's for d3 v4 only
|
||||||
- node console output colors like Chrome console
|
- Make node console output colors like Chrome console
|
||||||
- default theme doesn't work for class diagram
|
- Don't version control generated content, move them to outside project
|
||||||
- compile less to css
|
|
||||||
- don't version control generated content, move them to outside project
|
|
||||||
- editor
|
- editor
|
||||||
- dist
|
|
||||||
- docs
|
- docs
|
||||||
- what's the correct way to change logLevel as an end user?
|
- What's the correct way to change logLevel as an end user?
|
||||||
- d3 v3 doesn't support 'use strict'
|
- d3 v3 doesn't support 'use strict'
|
||||||
- babel-plugin-transform-remove-strict-mode
|
- babel-plugin-transform-remove-strict-mode
|
||||||
- need to remove it after upgrading to d3 v4
|
- need to remove it after upgrading to d3 v4
|
||||||
|
- rewrite live editor
|
||||||
|
- Fix Travis CI
|
||||||
|
- Fix CodeClimate
|
||||||
|
- What is live-server ?
|
||||||
|
- Get familar with jison
|
||||||
|
- How to generate doc?
|
||||||
|
- webpack warning: lodash too big
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import path from 'path'
|
import path from 'path'
|
||||||
import nodeExternals from 'webpack-node-externals'
|
import nodeExternals from 'webpack-node-externals'
|
||||||
|
import ExtractTextPlugin from 'extract-text-webpack-plugin'
|
||||||
|
|
||||||
export const webConfig = () => {
|
export const webConfig = () => {
|
||||||
return {
|
return {
|
||||||
@@ -70,3 +71,40 @@ export const nodeConfig = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const lessConfig = () => {
|
||||||
|
return {
|
||||||
|
target: 'web',
|
||||||
|
entry: {
|
||||||
|
'mermaid': './src/less/default/mermaid.less',
|
||||||
|
'mermaid.dark': './src/less/dark/mermaid.less',
|
||||||
|
'mermaid.forest': './src/less/forest/mermaid.less',
|
||||||
|
'mermaid.neutral': './src/less/neutral/mermaid.less'
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: path.join(__dirname, './dist/'),
|
||||||
|
filename: '[name].css'
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.less$/,
|
||||||
|
use: ExtractTextPlugin.extract({
|
||||||
|
fallback: 'style-loader',
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'css-loader'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'less-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new ExtractTextPlugin('[name].css')
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,11 +1,13 @@
|
|||||||
import { webConfig, nodeConfig } from './webpack.config.base.js'
|
import { webConfig, nodeConfig, lessConfig } from './webpack.config.base.js'
|
||||||
|
|
||||||
const config1 = webConfig()
|
const config = webConfig()
|
||||||
|
|
||||||
const config2 = webConfig()
|
const slimConfig = webConfig()
|
||||||
config2.externals = ['fs', 'd3']
|
slimConfig.externals = ['fs', 'd3']
|
||||||
config2.output.filename = '[name].slim.js'
|
slimConfig.output.filename = '[name].slim.js'
|
||||||
|
|
||||||
const config3 = nodeConfig()
|
const apiConfig = nodeConfig()
|
||||||
|
|
||||||
export default [config1, config2, config3]
|
const cssConfig = lessConfig()
|
||||||
|
|
||||||
|
export default [config, slimConfig, apiConfig, cssConfig]
|
||||||
|
|||||||
@@ -1,13 +1,18 @@
|
|||||||
import { webConfig, nodeConfig } from './webpack.config.base.js'
|
import ExtractTextPlugin from 'extract-text-webpack-plugin'
|
||||||
|
import { webConfig, nodeConfig, lessConfig } from './webpack.config.base.js'
|
||||||
|
|
||||||
const config1 = webConfig()
|
const minConfig = webConfig()
|
||||||
config1.output.filename = '[name].min.js'
|
minConfig.output.filename = '[name].min.js'
|
||||||
|
|
||||||
const config2 = webConfig()
|
const slimMinConfig = webConfig()
|
||||||
config2.externals = ['fs', 'd3']
|
slimMinConfig.externals = ['fs', 'd3']
|
||||||
config2.output.filename = '[name].slim.min.js'
|
slimMinConfig.output.filename = '[name].slim.min.js'
|
||||||
|
|
||||||
const config3 = nodeConfig()
|
const apiMinConfig = nodeConfig()
|
||||||
config3.output.filename = '[name].min.js'
|
apiMinConfig.output.filename = '[name].min.js'
|
||||||
|
|
||||||
export default [config1, config2, config3]
|
const cssMinConfig = lessConfig()
|
||||||
|
cssMinConfig.output.filename = '[name].min.css'
|
||||||
|
cssMinConfig.plugins = [ new ExtractTextPlugin('[name].min.css') ]
|
||||||
|
|
||||||
|
export default [minConfig, slimMinConfig, apiMinConfig, cssMinConfig]
|
||||||
|
|||||||
Reference in New Issue
Block a user