mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-18 11:44:07 +01:00
Tyler Long
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,5 +1,4 @@
|
||||
node_modules
|
||||
#dist
|
||||
bower_components
|
||||
|
||||
*.sublime-project
|
||||
@@ -13,3 +12,4 @@ test/tmp_*
|
||||
test/fixtures/samples/*.actual*
|
||||
|
||||
dist/*.js
|
||||
dist/*.css
|
||||
|
||||
32
.travis.yml
32
.travis.yml
@@ -1,21 +1,23 @@
|
||||
language: node_js
|
||||
osx_image: xcode8.1
|
||||
os:
|
||||
- linux
|
||||
- osx
|
||||
sudo: false
|
||||
node_js:
|
||||
- "6.9"
|
||||
- "7.9"
|
||||
env:
|
||||
- CXX=g++-4.8
|
||||
sudo: required
|
||||
dist: xenial
|
||||
addons:
|
||||
code_climate:
|
||||
repo_token: e87e6bf1c253e0555437ebd23235fdfe2749b889358e7c6d100e4ea5b4f2e091
|
||||
apt:
|
||||
sources:
|
||||
- ubuntu-toolchain-r-test
|
||||
- google-chrome
|
||||
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:
|
||||
- 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.
|
||||
|
||||
|
||||
## 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
|
||||
@@ -26,6 +27,7 @@ place to prevent this:
|
||||
|
||||
|
||||
## 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
|
||||
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').
|
||||
|
||||
# Build instructions
|
||||
|
||||
Fork, then:
|
||||
|
||||
```
|
||||
@@ -63,14 +66,23 @@ for instance:
|
||||
```
|
||||
gulp jison
|
||||
```
|
||||
|
||||
To build:
|
||||
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
|
||||
To run the tests:
|
||||
|
||||
```
|
||||
yarn run karma
|
||||
yarn test
|
||||
```
|
||||
|
||||
To build the /dist directory
|
||||
```
|
||||
yarn run dist
|
||||
```
|
||||
Make sure you have Chrome browser installed. We use Chrome headless for testing.
|
||||
|
||||
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)
|
||||
|
||||
Generation of diagrams and flowcharts from text in a similar manner as markdown.
|
||||
@@ -108,6 +108,7 @@ end
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
## Further reading
|
||||
|
||||
* [Usage](http://knsv.github.io/mermaid/#usage)
|
||||
@@ -116,6 +117,7 @@ end
|
||||
* [Mermaid client](http://knsv.github.io/mermaid/#mermaid-cli)
|
||||
* [Demos](http://knsv.github.io/mermaid/#demos)
|
||||
|
||||
|
||||
# Request for assistance
|
||||
|
||||
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.
|
||||
|
||||
|
||||
# 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
|
||||
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
|
||||
[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.
|
||||
|
||||
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 [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.*
|
||||
|
||||
|
||||
@@ -3,14 +3,16 @@
|
||||
"authors": [
|
||||
"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",
|
||||
"keywords": [
|
||||
"diagram",
|
||||
"markdown",
|
||||
"flowchart",
|
||||
"sequence diagram",
|
||||
"gantt"
|
||||
"gantt",
|
||||
"class diagram",
|
||||
"git graph"
|
||||
],
|
||||
"license": "MIT",
|
||||
"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">
|
||||
<title>Mermaid Quick Test Page</title>
|
||||
<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>
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
@@ -65,9 +65,8 @@ Add another diagram to demo page : 48h
|
||||
gitGraph :
|
||||
options
|
||||
{
|
||||
"key": "value",
|
||||
"nodeWidth": 150,
|
||||
"nodeSpacing" : 150
|
||||
"nodeSpacing" : 150,
|
||||
"nodeRadius": 10
|
||||
}
|
||||
end
|
||||
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 shell = require('gulp-shell')
|
||||
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 = {
|
||||
port: 8080, // Set the server port. Defaults to 8080.
|
||||
@@ -28,17 +24,3 @@ gulp.task('watch2', ['live-server'], function () {
|
||||
'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 browserify = require('gulp-browserify')
|
||||
|
||||
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
|
||||
gulp.task('editor', function () {
|
||||
@@ -98,7 +7,3 @@ gulp.task('editor', function () {
|
||||
.pipe(concat('build.js'))
|
||||
.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 path = require('path')
|
||||
var less = require('gulp-less')
|
||||
var rename = require('gulp-rename')
|
||||
var concat = require('gulp-concat')
|
||||
|
||||
gulp.task('editor-less', function () {
|
||||
@@ -14,21 +13,4 @@ gulp.task('editor-less', function () {
|
||||
.pipe(gulp.dest('./editor/css/'))
|
||||
})
|
||||
|
||||
gulp.task('mermaid-less', function () {
|
||||
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'])
|
||||
gulp.task('less', ['editor-less'])
|
||||
|
||||
@@ -1,20 +1,10 @@
|
||||
var gulp = require('gulp')
|
||||
var jasmine = require('gulp-jasmine')
|
||||
var shell = require('gulp-shell')
|
||||
var istanbul = require('gulp-istanbul')
|
||||
var jshint = require('gulp-jshint')
|
||||
var stylish = require('jshint-stylish')
|
||||
var qunit = require('gulp-qunit')
|
||||
var bower = require('gulp-bower')
|
||||
|
||||
// Using gulp-jshint and jshint-stylish
|
||||
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('test', ['coverage', 'jasmine', 'qunit'])
|
||||
|
||||
gulp.task('jasmine', ['jison', 'lint'], function () {
|
||||
return gulp.src(['src/**/*.spec.js'])
|
||||
@@ -26,8 +16,6 @@ gulp.task('jas', function () {
|
||||
.pipe(jasmine({ includeStackTrace: true }))
|
||||
})
|
||||
|
||||
gulp.task('tape', shell.task(['node_modules/.bin/tape ./test/cli_test-*.js']))
|
||||
|
||||
gulp.task('coverage', function (cb) {
|
||||
gulp.src(['src/**/*.js', '!src/**/*.spec.js'])
|
||||
.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')
|
||||
|
||||
requireDir('./gulp/tasks')
|
||||
|
||||
@@ -9,7 +9,7 @@ module.exports = function (config) {
|
||||
|
||||
// frameworks to use
|
||||
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||
frameworks: ['browserify', 'jasmine'],
|
||||
frameworks: ['jasmine'],
|
||||
|
||||
// list of files / patterns to load in the browser
|
||||
files: [
|
||||
@@ -23,25 +23,34 @@ module.exports = function (config) {
|
||||
],
|
||||
|
||||
preprocessors: {
|
||||
'src/**/*.spec.js': ['browserify']
|
||||
'src/**/*.spec.js': ['webpack']
|
||||
},
|
||||
|
||||
// list of files to exclude
|
||||
// exclude: ['src/diagrams/*.js'],
|
||||
|
||||
browserify: {
|
||||
debug: true,
|
||||
// plugin: ['proxyquireify/plugin']
|
||||
extensions: ['.js'],
|
||||
configure: function (bundle) {
|
||||
bundle.on('prebundle', function () {
|
||||
bundle
|
||||
.plugin('proxyquire-universal')
|
||||
})
|
||||
webpack: {
|
||||
externals: ['fs'],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
['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
|
||||
// possible values: 'dots', 'progress'
|
||||
@@ -61,14 +70,26 @@ module.exports = function (config) {
|
||||
// enable / disable watching file and executing tests whenever any file changes
|
||||
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
|
||||
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
|
||||
browsers: ['PhantomJS'],
|
||||
browsers: ['ChromeHeadless'],
|
||||
plugins: [
|
||||
'karma-jasmine',
|
||||
'karma-phantomjs-launcher',
|
||||
'karma-browserify',
|
||||
'karma-babel-preprocessor'
|
||||
'karma-chrome-launcher',
|
||||
'karma-webpack'
|
||||
],
|
||||
// Continuous Integration mode
|
||||
// if true, Karma captures browsers, runs the tests and exits
|
||||
|
||||
66
package.json
66
package.json
@@ -1,50 +1,35 @@
|
||||
{
|
||||
"name": "mermaid",
|
||||
"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",
|
||||
"keywords": [
|
||||
"diagram",
|
||||
"markdown",
|
||||
"flowchart",
|
||||
"sequence diagram",
|
||||
"gantt"
|
||||
"gantt",
|
||||
"class diagram",
|
||||
"git graph"
|
||||
],
|
||||
"bin": {
|
||||
"mermaid": "./bin/mermaid.js"
|
||||
},
|
||||
"watch": {
|
||||
"lint": {
|
||||
"patterns": [
|
||||
"bin",
|
||||
"gulp",
|
||||
"lib",
|
||||
"src",
|
||||
"test",
|
||||
"*.js"
|
||||
],
|
||||
"extensions": "js",
|
||||
"ignore": [
|
||||
"src/d3.js",
|
||||
"**/parser/*.js"
|
||||
]
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"watch": "yarn build -- --watch",
|
||||
"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",
|
||||
"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",
|
||||
"jison": "gulp jison_legacy",
|
||||
"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",
|
||||
"jasmine": "yarn run jison && node node_modules/jasmine-es6/bin/jasmine.js",
|
||||
"pretest": "yarn run jison && yarn lint",
|
||||
"test": "yarn run tape && yarn run karma"
|
||||
"test": "yarn run tape && yarn run karma",
|
||||
"live": "live-server ./test/examples",
|
||||
"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": {
|
||||
"type": "git",
|
||||
@@ -76,18 +61,18 @@
|
||||
"devDependencies": {
|
||||
"async": "^2.3.0",
|
||||
"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-preset-env": "^1.4.0",
|
||||
"browserify": "~14.3.0",
|
||||
"clone": "^2.1.1",
|
||||
"codeclimate-test-reporter": "0.4.1",
|
||||
"css-loader": "^0.28.0",
|
||||
"dox": "^0.9.0",
|
||||
"event-stream": "^3.3.4",
|
||||
"extract-text-webpack-plugin": "^2.1.0",
|
||||
"front-matter": "^2.1.2",
|
||||
"gulp": "~3.9.1",
|
||||
"gulp-bower": "0.0.13",
|
||||
"gulp-browserify": "^0.5.1",
|
||||
"gulp-bump": "^2.7.0",
|
||||
"gulp-concat": "~2.6.1",
|
||||
"gulp-data": "^1.2.1",
|
||||
@@ -102,7 +87,6 @@
|
||||
"gulp-jasmine": "~2.4.2",
|
||||
"gulp-jasmine-browser": "^1.7.1",
|
||||
"gulp-jison": "~1.2.0",
|
||||
"gulp-jshint": "^2.0.4",
|
||||
"gulp-less": "^3.3.0",
|
||||
"gulp-livereload": "^3.8.1",
|
||||
"gulp-marked": "^1.0.0",
|
||||
@@ -111,34 +95,30 @@
|
||||
"gulp-rename": "~1.2.2",
|
||||
"gulp-shell": "^0.6.3",
|
||||
"gulp-tag-version": "^1.3.0",
|
||||
"gulp-uglify": "~2.1.2",
|
||||
"gulp-util": "^3.0.8",
|
||||
"gulp-vartree": "^2.0.1",
|
||||
"hogan.js": "^3.0.2",
|
||||
"inject-loader": "^3.0.0",
|
||||
"jasmine": "2.5.3",
|
||||
"jasmine-es6": "0.4.0",
|
||||
"jison": "^0.4.17",
|
||||
"jsdom": "^9.12.0",
|
||||
"jshint": "^2.9.4",
|
||||
"jshint-stylish": "^2.2.1",
|
||||
"karma": "^1.6.0",
|
||||
"karma-babel-preprocessor": "^6.0.1",
|
||||
"karma-browserify": "^5.1.1",
|
||||
"karma-chrome-launcher": "^2.0.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",
|
||||
"map-stream": "0.0.7",
|
||||
"marked": "^0.3.6",
|
||||
"mock-browser": "^0.92.14",
|
||||
"npm-check-updates": "^2.10.5",
|
||||
"npm-watch": "^0.1.8",
|
||||
"phantomjs": "^2.1.7",
|
||||
"proxyquire": "^1.7.11",
|
||||
"proxyquire-universal": "^1.0.8",
|
||||
"proxyquireify": "^3.2.1",
|
||||
"npm-check-updates": "^2.11.0",
|
||||
"phantomjs-prebuilt": "^2.1.14",
|
||||
"require-dir": "^0.3.1",
|
||||
"rimraf": "^2.6.1",
|
||||
"standard": "^10.0.2",
|
||||
"style-loader": "^0.16.1",
|
||||
"tape": "^4.6.3",
|
||||
"webpack": "^2.4.1",
|
||||
"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 = {
|
||||
dividerMargin: 10,
|
||||
padding: 5,
|
||||
textHeight: 14
|
||||
textHeight: 10
|
||||
}
|
||||
|
||||
// Todo optimize
|
||||
@@ -200,8 +200,8 @@ var drawEdge = function (elem, path, relation) {
|
||||
.attr('class', 'box')
|
||||
.attr('x', bounds.x - conf.padding / 2)
|
||||
.attr('y', bounds.y - conf.padding / 2)
|
||||
.attr('width', bounds.width + 2 * conf.padding / 2)
|
||||
.attr('height', bounds.height + 2 * conf.padding / 2)
|
||||
.attr('width', bounds.width + conf.padding)
|
||||
.attr('height', bounds.height + conf.padding)
|
||||
}
|
||||
|
||||
edgeCount++
|
||||
@@ -259,8 +259,8 @@ var drawClass = function (elem, classDef) {
|
||||
|
||||
var methodsLine = g.append('line') // text label for the x axis
|
||||
.attr('x1', 0)
|
||||
.attr('y1', conf.padding + titleHeight + 3 * conf.dividerMargin / 2 + membersBox.height)
|
||||
.attr('y2', conf.padding + titleHeight + 3 * conf.dividerMargin / 2 + membersBox.height)
|
||||
.attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
|
||||
.attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
|
||||
|
||||
var methods = g.append('text') // text label for the x axis
|
||||
.attr('x', conf.padding)
|
||||
|
||||
@@ -188,7 +188,7 @@ var setLink = function (id, linkStr) {
|
||||
var elem = d3.select(element).select('#' + id)
|
||||
if (elem !== null) {
|
||||
elem.on('click', function () {
|
||||
window.open(linkStr, 'newTab') // jshint ignore:line
|
||||
window.open(linkStr, 'newTab')
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
var Logger = require('../../logger')
|
||||
var log = Logger.Log
|
||||
var _ = require('lodash')
|
||||
const Logger = require('../../logger')
|
||||
const log = Logger.Log
|
||||
const _ = require('lodash')
|
||||
|
||||
var commits = {}
|
||||
var head = null
|
||||
@@ -136,19 +136,18 @@ exports.reset = function (commitRef) {
|
||||
}
|
||||
|
||||
function upsert (arr, key, newval) {
|
||||
var match = _.find(arr, key)
|
||||
if (match) {
|
||||
var index = _.indexOf(arr, _.find(arr, key))
|
||||
arr.splice(index, 1, newval)
|
||||
} else {
|
||||
const index = arr.indexOf(key)
|
||||
if (index === -1) {
|
||||
arr.push(newval)
|
||||
} else {
|
||||
arr.splice(index, 1, newval)
|
||||
}
|
||||
}
|
||||
|
||||
function prettyPrintCommitHistory (commitArr) {
|
||||
var commit = _.maxBy(commitArr, 'seq')
|
||||
var line = ''
|
||||
_.each(commitArr, function (c) {
|
||||
commitArr.forEach(function (c) {
|
||||
if (c === commit) {
|
||||
line += '\t*'
|
||||
} else {
|
||||
@@ -156,8 +155,8 @@ function prettyPrintCommitHistory (commitArr) {
|
||||
}
|
||||
})
|
||||
var label = [line, commit.id, commit.seq]
|
||||
_.each(branches, function (v, k) {
|
||||
if (v === commit.id) label.push(k)
|
||||
_.each(branches, function (value, key) {
|
||||
if (value === commit.id) label.push(key)
|
||||
})
|
||||
log.debug(label.join(' '))
|
||||
if (Array.isArray(commit.parent)) {
|
||||
@@ -189,8 +188,8 @@ exports.clear = function () {
|
||||
}
|
||||
|
||||
exports.getBranchesAsObjArray = function () {
|
||||
var branchArr = _.map(branches, function (v, k) {
|
||||
return { 'name': k, 'commit': commits[v] }
|
||||
const branchArr = _.map(branches, function (value, key) {
|
||||
return { 'name': key, 'commit': commits[value] }
|
||||
})
|
||||
return branchArr
|
||||
}
|
||||
@@ -201,7 +200,7 @@ exports.getCommitsArray = function () {
|
||||
var commitArr = Object.keys(commits).map(function (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'])
|
||||
}
|
||||
exports.getCurrentBranch = function () { return curBranch }
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
var db = require('./gitGraphAst')
|
||||
var _ = require('lodash')
|
||||
var gitGraphParser = require('./parser/gitGraph')
|
||||
var d3 = require('../../d3')
|
||||
var Logger = require('../../logger')
|
||||
var log = Logger.Log
|
||||
const db = require('./gitGraphAst')
|
||||
const _ = require('lodash')
|
||||
const gitGraphParser = require('./parser/gitGraph')
|
||||
const d3 = require('../../d3')
|
||||
const Logger = require('../../logger')
|
||||
const log = Logger.Log
|
||||
|
||||
var allCommitsDict = {}
|
||||
var branchNum
|
||||
var config = {
|
||||
nodeSpacing: 75,
|
||||
nodeSpacing: 150,
|
||||
nodeFillColor: 'yellow',
|
||||
nodeStrokeWidth: 2,
|
||||
nodeStrokeColor: 'grey',
|
||||
@@ -17,12 +17,12 @@ var config = {
|
||||
lineColor: 'grey',
|
||||
leftMargin: 50,
|
||||
branchColors: ['#442f74', '#983351', '#609732', '#AA9A39'],
|
||||
nodeRadius: 15,
|
||||
nodeRadius: 10,
|
||||
nodeLabel: {
|
||||
width: 75,
|
||||
height: 100,
|
||||
x: -25,
|
||||
y: 15
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
var apiConfig = {}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
/* eslint-env jasmine */
|
||||
var proxyquire = require('proxyquire')
|
||||
/**
|
||||
* Created by knut on 14-11-18.
|
||||
*/
|
||||
@@ -15,7 +14,10 @@ var d3 = {
|
||||
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) {
|
||||
if (value !== undefined) {
|
||||
|
||||
@@ -58,11 +58,10 @@ exports.drawLabel = function (elem, txtObject) {
|
||||
}
|
||||
var polygon = elem.append('polygon')
|
||||
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.x = txtObject.x + 0.5 * txtObject.labelMargin
|
||||
txtObject.fill = 'white'
|
||||
exports.drawText(elem, txtObject)
|
||||
}
|
||||
var actorCnt = -1
|
||||
@@ -137,8 +136,6 @@ exports.drawLoop = function (elem, bounds, labelText, conf) {
|
||||
.attr('y1', starty)
|
||||
.attr('x2', stopx)
|
||||
.attr('y2', stopy)
|
||||
.attr('stroke-width', 2)
|
||||
.attr('stroke', '#526e52')
|
||||
.attr('class', 'loopLine')
|
||||
}
|
||||
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.labelMargin = 1.5 * 10 // This is the small box that says "loop"
|
||||
txt.class = 'labelText' // Its size & position are fixed.
|
||||
txt.fill = 'white'
|
||||
|
||||
exports.drawLabel(g, txt)
|
||||
|
||||
|
||||
@@ -1,56 +1,62 @@
|
||||
g.classGroup text {
|
||||
fill:@nodeBorder;
|
||||
stroke:none;
|
||||
fill: @nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 14px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill:@nodeBkg;
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
svg .classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width:0;
|
||||
stroke-width: 0;
|
||||
fill: @nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg .classLabel .label {
|
||||
fill: @nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: @nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill:none;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.composition{
|
||||
fill : @nodeBorder;
|
||||
.composition {
|
||||
fill: @nodeBorder;
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#compositionEnd {
|
||||
.composition;
|
||||
}
|
||||
.aggregation{
|
||||
fill : @nodeBkg;
|
||||
|
||||
.aggregation {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart {
|
||||
.aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd {
|
||||
.aggregation;
|
||||
}
|
||||
@@ -58,12 +64,15 @@ svg .classLabel .label {
|
||||
#dependencyStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#dependencyEnd {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#extensionStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#extensionEnd {
|
||||
.composition;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
.mermaid .label { color: @darkTextColor }
|
||||
.mermaid .label {
|
||||
color: @darkTextColor
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon {
|
||||
fill: @mainBkg;
|
||||
stroke: @nodeBorder;
|
||||
stroke: @border1;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
|
||||
.arrowheadPath {
|
||||
fill: @arrowheadColor;
|
||||
}
|
||||
@@ -22,7 +23,7 @@
|
||||
background-color: @edgeLabelBackground;
|
||||
}
|
||||
|
||||
.cluster rect{
|
||||
.cluster rect {
|
||||
fill: @secondBkg !important;
|
||||
rx: 4 !important;
|
||||
stroke: @clusterBorder !important;
|
||||
|
||||
@@ -1,24 +1,39 @@
|
||||
/** Section styling */
|
||||
|
||||
.section {
|
||||
stroke: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.section0{
|
||||
|
||||
.section0 {
|
||||
fill: @sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill: @sectionBkgColor2;
|
||||
}
|
||||
.section1,.section3 {
|
||||
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: @altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 { fill: @titleColor;}
|
||||
.sectionTitle1 { fill: @titleColor;}
|
||||
.sectionTitle2 { fill: @titleColor;}
|
||||
.sectionTitle3 { fill: @titleColor;}
|
||||
.sectionTitle0 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
text-anchor: start;
|
||||
@@ -26,29 +41,39 @@
|
||||
text-height: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: @sectionBkgColor;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.grid .tick text {
|
||||
fill: @taskTextLightColor;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Today line */
|
||||
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: @todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Task styling */
|
||||
|
||||
|
||||
/* Default task */
|
||||
|
||||
.task {
|
||||
stroke-width: 1;
|
||||
}
|
||||
@@ -57,75 +82,126 @@
|
||||
text-anchor: middle;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: @taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: @taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
|
||||
/* Specific task settings for the sections*/
|
||||
|
||||
.taskText0, .taskText1, .taskText2, .taskText3 {
|
||||
.taskText0,
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: @taskTextColor;
|
||||
}
|
||||
|
||||
.task0, .task1, .task2, .task3 {
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: @taskBkgColor;
|
||||
stroke: @taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,.taskTextOutside2, {
|
||||
fill: @taskTextOutsideColor;
|
||||
}
|
||||
.taskTextOutside1, .taskTextOutside3 {
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2,
|
||||
{
|
||||
fill: @taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: @taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
/* Active task */
|
||||
.active0, .active1, .active2, .active3 {
|
||||
|
||||
.active0,
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: @activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0, .activeText1, .activeText2, .activeText3 {
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Completed task */
|
||||
.done0, .done1, .done2, .done3 {
|
||||
|
||||
.done0,
|
||||
.done1,
|
||||
.done2,
|
||||
.done3 {
|
||||
fill: @doneTaskBkgColor;
|
||||
}
|
||||
|
||||
.doneText0, .doneText1, .doneText2, .doneText3 {
|
||||
.doneText0,
|
||||
.doneText1,
|
||||
.doneText2,
|
||||
.doneText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Tasks on the critical line */
|
||||
.crit0, .crit1, .crit2, .crit3 {
|
||||
|
||||
.crit0,
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @critBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
|
||||
|
||||
.activeCrit0,
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
|
||||
|
||||
.doneCrit0,
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke-width: 1;
|
||||
cursor: pointer;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
|
||||
|
||||
.doneCritText0,
|
||||
.doneCritText1,
|
||||
.doneCritText2,
|
||||
.doneCritText3 {
|
||||
fill: @taskTextLightColor !important;
|
||||
}
|
||||
.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
|
||||
|
||||
.activeCritText0,
|
||||
.activeCritText1,
|
||||
.activeCritText2,
|
||||
.activeCritText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
@@ -134,7 +210,3 @@
|
||||
font-size: 18px;
|
||||
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 "gantt";
|
||||
@import "classDiagram";
|
||||
|
||||
@import "gitGraph";
|
||||
.node text {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size:14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
div.mermaidTooltip {
|
||||
@@ -20,5 +20,5 @@ div.mermaidTooltip {
|
||||
border: 1px solid @border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index:100;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
|
||||
|
||||
.actor {
|
||||
stroke: @actorBorder;
|
||||
fill: @actorBkg;
|
||||
}
|
||||
|
||||
text.actor {
|
||||
fill: @actorTextColor;
|
||||
stroke: none;
|
||||
@@ -33,8 +32,8 @@ text.actor {
|
||||
#crosshead path {
|
||||
fill: @signalColor !important;
|
||||
stroke: @signalColor !important;
|
||||
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill: @signalTextColor;
|
||||
stroke: none;
|
||||
|
||||
@@ -7,58 +7,46 @@
|
||||
@border2: rgba(255, 255, 255, 0.25);
|
||||
@arrowheadColor: @mainContrastColor;
|
||||
|
||||
|
||||
/* Flowchart variables */
|
||||
@nodeBkg:@mainBkg;
|
||||
@nodeBorder:@border1;
|
||||
|
||||
@clusterBkg:@secondBkg;
|
||||
@clusterBorder:@border2;
|
||||
|
||||
@defaultLinkColor:@lineColor;
|
||||
|
||||
@nodeBkg: @mainBkg;
|
||||
@nodeBorder: purple;
|
||||
@clusterBkg: @secondBkg;
|
||||
@clusterBorder: @border2;
|
||||
@defaultLinkColor: @lineColor;
|
||||
@titleColor: #F9FFFE;
|
||||
|
||||
@edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
@actorBorder: @border1;
|
||||
@actorBkg: @mainBkg;
|
||||
@actorBkg: @mainBkg;
|
||||
@actorTextColor: black;
|
||||
@actorLineColor: @mainContrastColor;
|
||||
|
||||
@signalColor: @mainContrastColor;
|
||||
@signalTextColor: @mainContrastColor;
|
||||
|
||||
@labelBoxBkgColor: @actorBkg;
|
||||
@labelBoxBorderColor: @actorBorder;
|
||||
@labelTextColor: @mainContrastColor;
|
||||
|
||||
@noteBorderColor: @border2;
|
||||
@noteBkgColor: #fff5ad;
|
||||
@noteBkgColor: #fff5ad;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
@sectionBkgColor: rgba(255, 255, 255, 0.3);
|
||||
@altSectionBkgColor: white;
|
||||
@sectionBkgColor2: #EAE8B9;
|
||||
|
||||
@taskBorderColor: rgba(255, 255, 255, 0.5);
|
||||
@taskBkgColor: @mainBkg;
|
||||
@taskTextColor: @darkTextColor;
|
||||
@taskTextOutsideColor: @taskTextLightColor;
|
||||
|
||||
@activeTaskBorderColor: rgba(255, 255, 255, 0.5);
|
||||
@activeTaskBkgColor: #81B1DB;
|
||||
|
||||
@gridColor: @mainContrastColor;
|
||||
|
||||
@doneTaskBkgColor: @mainContrastColor;
|
||||
@doneTaskBorderColor: grey;
|
||||
|
||||
@critBorderColor: #E83737;
|
||||
@critBkgColor: #E83737;
|
||||
|
||||
@taskTextLightColor: @mainContrastColor;
|
||||
@taskTextDarkColor: @darkTextColor;
|
||||
|
||||
@todayLineColor: #DB5757;
|
||||
|
||||
@@ -1,56 +1,62 @@
|
||||
g.classGroup text {
|
||||
fill:@nodeBorder;
|
||||
stroke:none;
|
||||
fill: @nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 14px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill:@nodeBkg;
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
svg .classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width:0;
|
||||
stroke-width: 0;
|
||||
fill: @nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg .classLabel .label {
|
||||
fill: @nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: @nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill:none;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.composition{
|
||||
fill : @nodeBorder;
|
||||
.composition {
|
||||
fill: @nodeBorder;
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#compositionEnd {
|
||||
.composition;
|
||||
}
|
||||
.aggregation{
|
||||
fill : @nodeBkg;
|
||||
|
||||
.aggregation {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart {
|
||||
.aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd {
|
||||
.aggregation;
|
||||
}
|
||||
@@ -58,12 +64,15 @@ svg .classLabel .label {
|
||||
#dependencyStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#dependencyEnd {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#extensionStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#extensionEnd {
|
||||
.composition;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
.mermaid .label { color:#333}
|
||||
.mermaid .label {
|
||||
color: #333
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon {
|
||||
fill: @mainBkg;
|
||||
stroke: @nodeBorder;
|
||||
stroke: @border1;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
@@ -21,13 +23,13 @@
|
||||
background-color: @edgeLabelBackground;
|
||||
}
|
||||
|
||||
.cluster rect{
|
||||
.cluster rect {
|
||||
fill: @secondBkg !important;
|
||||
rx:4 !important;
|
||||
rx: 4 !important;
|
||||
stroke: @clusterBorder !important;
|
||||
stroke-width: 1px !important;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill:@titleColor;
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
@@ -1,138 +1,209 @@
|
||||
/** Section styling */
|
||||
|
||||
.section {
|
||||
stroke:none;
|
||||
opacity:0.2;
|
||||
stroke: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.section0{
|
||||
fill:@sectionBkgColor;
|
||||
|
||||
.section0 {
|
||||
fill: @sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill:@sectionBkgColor2;
|
||||
}
|
||||
.section1,.section3 {
|
||||
fill:@altSectionBkgColor;
|
||||
opacity:0.2;
|
||||
fill: @sectionBkgColor2;
|
||||
}
|
||||
|
||||
.sectionTitle0 { fill:@titleColor;}
|
||||
.sectionTitle1 { fill:@titleColor;}
|
||||
.sectionTitle2 { fill:@titleColor;}
|
||||
.sectionTitle3 { fill:@titleColor;}
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: @altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
text-anchor:start;
|
||||
font-size:11px;
|
||||
text-height:14px;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
text-height: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: @gridColor;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Today line */
|
||||
|
||||
.today {
|
||||
fill:none;
|
||||
stroke:@todayLineColor;
|
||||
stroke-width:2px;
|
||||
fill: none;
|
||||
stroke: @todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Task styling */
|
||||
|
||||
|
||||
/* Default task */
|
||||
|
||||
.task {
|
||||
stroke-width:2;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.taskText {
|
||||
text-anchor:middle;
|
||||
font-size:11px;
|
||||
text-anchor: middle;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill:@taskTextDarkColor;
|
||||
text-anchor:start;
|
||||
font-size:11px;
|
||||
fill: @taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill:@taskTextDarkColor;
|
||||
text-anchor:end;
|
||||
font-size:11px;
|
||||
fill: @taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
|
||||
/* Specific task settings for the sections*/
|
||||
|
||||
.taskText0, .taskText1, .taskText2, .taskText3 {
|
||||
fill:@taskTextColor;
|
||||
.taskText0,
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: @taskTextColor;
|
||||
}
|
||||
|
||||
.task0, .task1, .task2, .task3 {
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: @taskBkgColor;
|
||||
stroke: @taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,.taskTextOutside2, {
|
||||
fill:@taskTextOutsideColor;
|
||||
}
|
||||
.taskTextOutside1, .taskTextOutside3 {
|
||||
fill:@taskTextOutsideColor;
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2,
|
||||
{
|
||||
fill: @taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: @taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
/* Active task */
|
||||
.active0, .active1, .active2, .active3 {
|
||||
|
||||
.active0,
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: @activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0, .activeText1, .activeText2, .activeText3 {
|
||||
fill:@taskTextDarkColor !important;
|
||||
}
|
||||
/* Completed task */
|
||||
.done0, .done1, .done2, .done3 {
|
||||
stroke:@doneTaskBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke-width:2;
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.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 */
|
||||
.crit0, .crit1, .crit2, .crit3 {
|
||||
stroke:@critBorderColor;
|
||||
|
||||
.crit0,
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @critBkgColor;
|
||||
stroke-width:2;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
|
||||
stroke:@critBorderColor;
|
||||
|
||||
.activeCrit0,
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke-width:2;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
|
||||
stroke:@critBorderColor;
|
||||
|
||||
.doneCrit0,
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke-width:2;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
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 {
|
||||
text-anchor:middle;
|
||||
font-size:18px;
|
||||
fill:@taskTextDarkColor;
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: @taskTextDarkColor;
|
||||
}
|
||||
/*
|
||||
|
||||
|
||||
*/
|
||||
|
||||
@@ -3,10 +3,9 @@
|
||||
@import "sequenceDiagram";
|
||||
@import "gantt";
|
||||
@import "classDiagram";
|
||||
|
||||
.node text {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size:14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
div.mermaidTooltip {
|
||||
@@ -20,5 +19,5 @@ div.mermaidTooltip {
|
||||
border: 1px solid @border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index:100;
|
||||
}
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
|
||||
|
||||
.actor {
|
||||
stroke: @actorBorder;
|
||||
fill: @actorBkg;
|
||||
}
|
||||
|
||||
text.actor {
|
||||
fill:@actorTextColor;
|
||||
stroke:none;
|
||||
fill: @actorTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.actor-line {
|
||||
stroke:@actorLineColor;
|
||||
stroke: @actorLineColor;
|
||||
}
|
||||
|
||||
.messageLine0 {
|
||||
stroke-width:1.5;
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end:"url(#arrowhead)";
|
||||
stroke:@signalColor;
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @signalColor;
|
||||
}
|
||||
|
||||
.messageLine1 {
|
||||
stroke-width:1.5;
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: "2 2";
|
||||
stroke:@signalColor;
|
||||
stroke: @signalColor;
|
||||
}
|
||||
|
||||
#arrowhead {
|
||||
fill:@signalColor;
|
||||
fill: @signalColor;
|
||||
}
|
||||
#crosshead path {
|
||||
fill:@signalColor !important;
|
||||
stroke: @signalColor !important;
|
||||
|
||||
#crosshead path {
|
||||
fill: @signalColor !important;
|
||||
stroke: @signalColor !important;
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill:@signalTextColor;
|
||||
stroke:none;
|
||||
fill: @signalTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.labelBox {
|
||||
@@ -45,19 +45,19 @@ text.actor {
|
||||
}
|
||||
|
||||
.labelText {
|
||||
fill:@labelTextColor;
|
||||
stroke:none;
|
||||
fill: @labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopText {
|
||||
fill:@labelTextColor;
|
||||
stroke:none;
|
||||
fill: @labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopLine {
|
||||
stroke-width:2;
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end:"url(#arrowhead)";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @labelBoxBorderColor;
|
||||
}
|
||||
|
||||
@@ -68,8 +68,8 @@ text.actor {
|
||||
}
|
||||
|
||||
.noteText {
|
||||
fill:black;
|
||||
stroke:none;
|
||||
fill: black;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size:14px;
|
||||
}
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -1,61 +1,50 @@
|
||||
@mainBkg: #ECECFF;
|
||||
@secondBkg: #ffffde;
|
||||
@lineColor: #333333;
|
||||
@border1:#CCCCFF;
|
||||
@border2:#aaaa33;
|
||||
@border1: #CCCCFF;
|
||||
@border2: #aaaa33;
|
||||
@arrowheadColor: #333333;
|
||||
|
||||
/* Flowchart variables */
|
||||
@nodeBkg:@mainBkg;
|
||||
@nodeBorder:@border1;
|
||||
|
||||
@clusterBkg:@secondBkg;
|
||||
@clusterBorder:@border2;
|
||||
|
||||
@defaultLinkColor:@lineColor;
|
||||
|
||||
@nodeBkg: @mainBkg;
|
||||
@nodeBorder: #9370DB;
|
||||
@clusterBkg: @secondBkg;
|
||||
@clusterBorder: @border2;
|
||||
@defaultLinkColor: @lineColor;
|
||||
@titleColor: #333;
|
||||
|
||||
@edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
@actorBorder: @border1;
|
||||
@actorBkg: @mainBkg;
|
||||
@actorBkg: @mainBkg;
|
||||
@actorTextColor: black;
|
||||
@actorLineColor: grey;
|
||||
|
||||
@signalColor: #333;
|
||||
@signalTextColor: #333;
|
||||
|
||||
@labelBoxBkgColor: @actorBkg;
|
||||
@labelBoxBorderColor: @actorBorder;
|
||||
@labelTextColor: @actorTextColor;
|
||||
|
||||
@noteBorderColor: @border2;
|
||||
@noteBkgColor: #fff5ad;
|
||||
@noteBkgColor: #fff5ad;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
@sectionBkgColor: rgba(102, 102, 255, 0.49);
|
||||
@altSectionBkgColor: white;
|
||||
@sectionBkgColor2: #fff400;
|
||||
|
||||
@taskBorderColor: #534fbc;
|
||||
@taskBkgColor: #8a90dd;
|
||||
@taskTextColor: @taskTextLightColor;
|
||||
@taskTextOutsideColor: @taskTextDarkColor;
|
||||
|
||||
@activeTaskBorderColor: #534fbc;
|
||||
@activeTaskBkgColor: #bfc7ff;
|
||||
|
||||
@gridColor: lightgrey;
|
||||
|
||||
@doneTaskBkgColor: lightgrey;
|
||||
@doneTaskBorderColor: grey;
|
||||
|
||||
@critBorderColor: #ff8888;
|
||||
@critBkgColor: red;
|
||||
|
||||
@taskTextLightColor: white;
|
||||
@taskTextDarkColor: black;
|
||||
|
||||
@todayLineColor: red;
|
||||
@todayLineColor: red;
|
||||
|
||||
@@ -1,56 +1,62 @@
|
||||
g.classGroup text {
|
||||
fill:@nodeBorder;
|
||||
stroke:none;
|
||||
fill: @nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 14px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill:@nodeBkg;
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
svg .classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width:0;
|
||||
stroke-width: 0;
|
||||
fill: @nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg .classLabel .label {
|
||||
fill: @nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: @nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill:none;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.composition{
|
||||
fill : @nodeBorder;
|
||||
.composition {
|
||||
fill: @nodeBorder;
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#compositionEnd {
|
||||
.composition;
|
||||
}
|
||||
.aggregation{
|
||||
fill : @nodeBkg;
|
||||
|
||||
.aggregation {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart {
|
||||
.aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd {
|
||||
.aggregation;
|
||||
}
|
||||
@@ -58,12 +64,15 @@ svg .classLabel .label {
|
||||
#dependencyStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#dependencyEnd {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#extensionStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#extensionEnd {
|
||||
.composition;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.mermaid .label {
|
||||
.mermaid .label {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
color:#333
|
||||
color: #333
|
||||
}
|
||||
|
||||
.node rect,
|
||||
@@ -25,13 +25,13 @@ color:#333
|
||||
background-color: @edgeLabelBackground;
|
||||
}
|
||||
|
||||
.cluster rect{
|
||||
.cluster rect {
|
||||
fill: @secondBkg !important;
|
||||
rx:4 !important;
|
||||
rx: 4 !important;
|
||||
stroke: @clusterBorder !important;
|
||||
stroke-width: 1px !important;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill:@titleColor;
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
@@ -1,138 +1,209 @@
|
||||
/** Section styling */
|
||||
|
||||
.section {
|
||||
stroke:none;
|
||||
opacity:0.2;
|
||||
stroke: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.section0{
|
||||
fill:@sectionBkgColor;
|
||||
|
||||
.section0 {
|
||||
fill: @sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill:@sectionBkgColor2;
|
||||
}
|
||||
.section1,.section3 {
|
||||
fill:@altSectionBkgColor;
|
||||
opacity:0.2;
|
||||
fill: @sectionBkgColor2;
|
||||
}
|
||||
|
||||
.sectionTitle0 { fill:@titleColor;}
|
||||
.sectionTitle1 { fill:@titleColor;}
|
||||
.sectionTitle2 { fill:@titleColor;}
|
||||
.sectionTitle3 { fill:@titleColor;}
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: @altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
text-anchor:start;
|
||||
font-size:11px;
|
||||
text-height:14px;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
text-height: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: @gridColor;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Today line */
|
||||
|
||||
.today {
|
||||
fill:none;
|
||||
stroke:@todayLineColor;
|
||||
stroke-width:2px;
|
||||
fill: none;
|
||||
stroke: @todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Task styling */
|
||||
|
||||
|
||||
/* Default task */
|
||||
|
||||
.task {
|
||||
stroke-width:2;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.taskText {
|
||||
text-anchor:middle;
|
||||
font-size:11px;
|
||||
text-anchor: middle;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill:@taskTextDarkColor;
|
||||
text-anchor:start;
|
||||
font-size:11px;
|
||||
fill: @taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill:@taskTextDarkColor;
|
||||
text-anchor:end;
|
||||
font-size:11px;
|
||||
fill: @taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
|
||||
/* Specific task settings for the sections*/
|
||||
|
||||
.taskText0, .taskText1, .taskText2, .taskText3 {
|
||||
fill:@taskTextColor;
|
||||
.taskText0,
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: @taskTextColor;
|
||||
}
|
||||
|
||||
.task0, .task1, .task2, .task3 {
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: @taskBkgColor;
|
||||
stroke: @taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,.taskTextOutside2, {
|
||||
fill:@taskTextOutsideColor;
|
||||
}
|
||||
.taskTextOutside1, .taskTextOutside3 {
|
||||
fill:@taskTextOutsideColor;
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2,
|
||||
{
|
||||
fill: @taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: @taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
/* Active task */
|
||||
.active0, .active1, .active2, .active3 {
|
||||
|
||||
.active0,
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: @activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0, .activeText1, .activeText2, .activeText3 {
|
||||
fill:@taskTextDarkColor !important;
|
||||
}
|
||||
/* Completed task */
|
||||
.done0, .done1, .done2, .done3 {
|
||||
stroke:@doneTaskBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke-width:2;
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.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 */
|
||||
.crit0, .crit1, .crit2, .crit3 {
|
||||
stroke:@critBorderColor;
|
||||
|
||||
.crit0,
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @critBkgColor;
|
||||
stroke-width:2;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
|
||||
stroke:@critBorderColor;
|
||||
|
||||
.activeCrit0,
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke-width:2;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
|
||||
stroke:@critBorderColor;
|
||||
|
||||
.doneCrit0,
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke-width:2;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
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 {
|
||||
text-anchor:middle;
|
||||
font-size:18px;
|
||||
fill:@taskTextDarkColor;
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: @taskTextDarkColor;
|
||||
}
|
||||
/*
|
||||
|
||||
|
||||
*/
|
||||
|
||||
@@ -3,10 +3,9 @@
|
||||
@import "sequenceDiagram";
|
||||
@import "gantt";
|
||||
@import "classDiagram";
|
||||
|
||||
.node text {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size:14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
div.mermaidTooltip {
|
||||
@@ -20,5 +19,5 @@ div.mermaidTooltip {
|
||||
border: 1px solid @border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index:100;
|
||||
}
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
|
||||
|
||||
.actor {
|
||||
stroke: @actorBorder;
|
||||
fill: @actorBkg;
|
||||
}
|
||||
|
||||
text.actor {
|
||||
fill:@actorTextColor;
|
||||
stroke:none;
|
||||
fill: @actorTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.actor-line {
|
||||
stroke:@actorLineColor;
|
||||
stroke: @actorLineColor;
|
||||
}
|
||||
|
||||
.messageLine0 {
|
||||
stroke-width:1.5;
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end:"url(#arrowhead)";
|
||||
stroke:@signalColor;
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @signalColor;
|
||||
}
|
||||
|
||||
.messageLine1 {
|
||||
stroke-width:1.5;
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: "2 2";
|
||||
stroke:@signalColor;
|
||||
stroke: @signalColor;
|
||||
}
|
||||
|
||||
#arrowhead {
|
||||
fill:@signalColor;
|
||||
fill: @signalColor;
|
||||
}
|
||||
#crosshead path {
|
||||
fill:@signalColor !important;
|
||||
stroke: @signalColor !important;
|
||||
|
||||
#crosshead path {
|
||||
fill: @signalColor !important;
|
||||
stroke: @signalColor !important;
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill:@signalTextColor;
|
||||
stroke:none;
|
||||
fill: @signalTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.labelBox {
|
||||
@@ -45,19 +45,19 @@ text.actor {
|
||||
}
|
||||
|
||||
.labelText {
|
||||
fill:@labelTextColor;
|
||||
stroke:none;
|
||||
fill: @labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopText {
|
||||
fill:@labelTextColor;
|
||||
stroke:none;
|
||||
fill: @labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopLine {
|
||||
stroke-width:2;
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end:"url(#arrowhead)";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @labelBoxBorderColor;
|
||||
}
|
||||
|
||||
@@ -68,8 +68,8 @@ text.actor {
|
||||
}
|
||||
|
||||
.noteText {
|
||||
fill:black;
|
||||
stroke:none;
|
||||
fill: black;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size:14px;
|
||||
}
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -7,56 +7,46 @@
|
||||
@arrowheadColor: green;
|
||||
|
||||
/* Flowchart variables */
|
||||
@nodeBkg:@mainBkg;
|
||||
@nodeBorder:@border1;
|
||||
|
||||
@clusterBkg:@secondBkg;
|
||||
@clusterBorder:@border2;
|
||||
|
||||
@defaultLinkColor:@lineColor;
|
||||
|
||||
@nodeBkg: @mainBkg;
|
||||
@nodeBorder: @border1;
|
||||
@clusterBkg: @secondBkg;
|
||||
@clusterBorder: @border2;
|
||||
@defaultLinkColor: @lineColor;
|
||||
@titleColor: #333;
|
||||
|
||||
@edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
@actorBorder: @border1;
|
||||
@actorBkg: @mainBkg;
|
||||
@actorBkg: @mainBkg;
|
||||
@actorTextColor: black;
|
||||
@actorLineColor: grey;
|
||||
|
||||
@signalColor: #333;
|
||||
@signalTextColor: #333;
|
||||
|
||||
@labelBoxBkgColor: @actorBkg;
|
||||
@labelBoxBorderColor: #326932;
|
||||
@labelTextColor: @actorTextColor;
|
||||
|
||||
@noteBorderColor: @border2;
|
||||
@noteBkgColor: #fff5ad;
|
||||
@noteBkgColor: #fff5ad;
|
||||
|
||||
/* Gantt chart variables */
|
||||
@sectionBkgColor: #6eaa49;;
|
||||
|
||||
@sectionBkgColor: #6eaa49;
|
||||
;
|
||||
@altSectionBkgColor: white;
|
||||
@sectionBkgColor2: #6eaa49;
|
||||
|
||||
@taskBorderColor: @border1;
|
||||
@taskBkgColor: #487e3a;
|
||||
@taskTextColor: @taskTextLightColor;
|
||||
@taskTextOutsideColor: @taskTextDarkColor;
|
||||
|
||||
@activeTaskBorderColor: @taskBorderColor;
|
||||
@activeTaskBkgColor: @mainBkg;
|
||||
|
||||
@gridColor: lightgrey;
|
||||
|
||||
@doneTaskBkgColor: lightgrey;
|
||||
@doneTaskBorderColor: grey;
|
||||
|
||||
@critBorderColor: #ff8888;
|
||||
@critBkgColor: red;
|
||||
|
||||
@taskTextLightColor: white;
|
||||
@taskTextDarkColor: black;
|
||||
|
||||
@todayLineColor: red;
|
||||
@todayLineColor: red;
|
||||
|
||||
@@ -1,56 +1,62 @@
|
||||
g.classGroup text {
|
||||
fill: @nodeBorder;
|
||||
stroke:none;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill:@nodeBkg;
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
svg .classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width:0;
|
||||
stroke-width: 0;
|
||||
fill: @nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg .classLabel .label {
|
||||
fill: @nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: @nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill:none;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.composition{
|
||||
fill : @nodeBorder;
|
||||
.composition {
|
||||
fill: @nodeBorder;
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#compositionEnd {
|
||||
.composition;
|
||||
}
|
||||
.aggregation{
|
||||
fill : @nodeBkg;
|
||||
|
||||
.aggregation {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
stroke-width:1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart {
|
||||
.aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd {
|
||||
.aggregation;
|
||||
}
|
||||
@@ -58,12 +64,15 @@ svg .classLabel .label {
|
||||
#dependencyStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#dependencyEnd {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#extensionStart {
|
||||
.composition;
|
||||
}
|
||||
|
||||
#extensionEnd {
|
||||
.composition;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
.mermaid .label { color: @text }
|
||||
.mermaid .label {
|
||||
color: @text
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
|
||||
@@ -1,24 +1,39 @@
|
||||
/** Section styling */
|
||||
|
||||
.section {
|
||||
stroke: none;
|
||||
opacity:0.2;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.section0{
|
||||
|
||||
.section0 {
|
||||
fill: @sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill: @sectionBkgColor2;
|
||||
}
|
||||
.section1,.section3 {
|
||||
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: @altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 { fill: @titleColor;}
|
||||
.sectionTitle1 { fill: @titleColor;}
|
||||
.sectionTitle2 { fill: @titleColor;}
|
||||
.sectionTitle3 { fill: @titleColor;}
|
||||
.sectionTitle0 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: @titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
text-anchor: start;
|
||||
@@ -26,25 +41,34 @@
|
||||
text-height: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: @gridColor;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Today line */
|
||||
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: @todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Task styling */
|
||||
|
||||
|
||||
/* Default task */
|
||||
|
||||
.task {
|
||||
stroke-width: 2;
|
||||
}
|
||||
@@ -53,77 +77,127 @@
|
||||
text-anchor: middle;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: @taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: @taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
|
||||
/* Specific task settings for the sections*/
|
||||
|
||||
.taskText0, .taskText1, .taskText2, .taskText3 {
|
||||
.taskText0,
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: @taskTextColor;
|
||||
}
|
||||
|
||||
.task0, .task1, .task2, .task3 {
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: @taskBkgColor;
|
||||
stroke: @taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,.taskTextOutside2, {
|
||||
fill: @taskTextOutsideColor;
|
||||
}
|
||||
.taskTextOutside1, .taskTextOutside3 {
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2,
|
||||
{
|
||||
fill: @taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: @taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
/* Active task */
|
||||
.active0, .active1, .active2, .active3 {
|
||||
|
||||
.active0,
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: @activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0, .activeText1, .activeText2, .activeText3 {
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Completed task */
|
||||
.done0, .done1, .done2, .done3 {
|
||||
|
||||
.done0,
|
||||
.done1,
|
||||
.done2,
|
||||
.done3 {
|
||||
stroke: @doneTaskBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.doneText0, .doneText1, .doneText2, .doneText3 {
|
||||
.doneText0,
|
||||
.doneText1,
|
||||
.doneText2,
|
||||
.doneText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Tasks on the critical line */
|
||||
.crit0, .crit1, .crit2, .crit3 {
|
||||
stroke:@critBorderColor;
|
||||
|
||||
.crit0,
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @critBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
|
||||
|
||||
.activeCrit0,
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
|
||||
|
||||
.doneCrit0,
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
//shape-rendering: crispEdges;
|
||||
cursor: pointer; //shape-rendering: crispEdges;
|
||||
}
|
||||
.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
|
||||
|
||||
.doneCritText0,
|
||||
.doneCritText1,
|
||||
.doneCritText2,
|
||||
.doneCritText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
}
|
||||
.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
|
||||
|
||||
.activeCritText0,
|
||||
.activeCritText1,
|
||||
.activeCritText2,
|
||||
.activeCritText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
@@ -132,4 +206,3 @@
|
||||
font-size: 18px;
|
||||
fill: @taskTextDarkColor;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,10 +3,9 @@
|
||||
@import "sequenceDiagram";
|
||||
@import "gantt";
|
||||
@import "classDiagram";
|
||||
|
||||
.node text {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size:14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
div.mermaidTooltip {
|
||||
@@ -20,5 +19,5 @@ div.mermaidTooltip {
|
||||
border: 1px solid @border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index:100;
|
||||
}
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
|
||||
|
||||
.actor {
|
||||
stroke: @actorBorder;
|
||||
fill: @actorBkg;
|
||||
}
|
||||
|
||||
text.actor {
|
||||
fill: @actorTextColor;
|
||||
stroke: none;
|
||||
@@ -29,11 +28,12 @@ text.actor {
|
||||
#arrowhead {
|
||||
fill: @signalColor;
|
||||
}
|
||||
|
||||
#crosshead path {
|
||||
fill: @signalColor !important;
|
||||
stroke: @signalColor !important;
|
||||
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill: @signalTextColor;
|
||||
stroke: none;
|
||||
@@ -72,4 +72,4 @@ text.actor {
|
||||
stroke: none;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,66 +1,54 @@
|
||||
@mainBkg: #eee;
|
||||
@mainBkg: #eee;
|
||||
@secondBkg: lighten(@contrast, 55%);
|
||||
@lineColor: #666;
|
||||
@border1: #999;
|
||||
@border2: @contrast;
|
||||
|
||||
@note: #ffa;
|
||||
@text: #333;
|
||||
@contrast: #26a;
|
||||
@critical: #d42;
|
||||
@done: #bbb;
|
||||
@border1: #999;
|
||||
@border2: @contrast;
|
||||
@note: #ffa;
|
||||
@text: #333;
|
||||
@contrast: #26a;
|
||||
@critical: #d42;
|
||||
@done: #bbb;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
@nodeBkg: @mainBkg;
|
||||
@nodeBorder: @border1;
|
||||
|
||||
@clusterBkg: @secondBkg;
|
||||
@clusterBorder: @border2;
|
||||
|
||||
@defaultLinkColor: @lineColor;
|
||||
|
||||
@titleColor: @text;
|
||||
|
||||
@edgeLabelBackground: white;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
@actorBorder: @border1;
|
||||
@actorBkg: @mainBkg;
|
||||
@actorBkg: @mainBkg;
|
||||
@actorTextColor: @text;
|
||||
@actorLineColor: @lineColor;
|
||||
|
||||
@signalColor: @text;
|
||||
@signalTextColor: @text;
|
||||
|
||||
@labelBoxBkgColor: @contrast;
|
||||
@labelBoxBorderColor: @contrast;
|
||||
@labelBoxBkgColor: @actorBkg;
|
||||
@labelBoxBorderColor: @actorBorder;
|
||||
@labelTextColor: white;
|
||||
|
||||
@noteBorderColor: darken(@note, 60%);
|
||||
@noteBkgColor: @note;
|
||||
@noteBkgColor: @note;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
@sectionBkgColor: lighten(@contrast, 30%);
|
||||
@altSectionBkgColor: white;
|
||||
@sectionBkgColor2: lighten(@contrast, 30%);
|
||||
|
||||
@taskBorderColor: darken(@contrast, 10%);
|
||||
@taskBkgColor: @contrast;
|
||||
@taskTextColor: @taskTextLightColor;
|
||||
@taskTextOutsideColor: @taskTextDarkColor;
|
||||
|
||||
@activeTaskBorderColor: @taskBorderColor;
|
||||
@activeTaskBkgColor: @mainBkg;
|
||||
|
||||
@gridColor: lighten(@border1, 30%);
|
||||
|
||||
@doneTaskBkgColor: @done;
|
||||
@doneTaskBorderColor: @lineColor;
|
||||
|
||||
@critBorderColor: darken(@critBkgColor, 10%);
|
||||
@critBkgColor: @critical;
|
||||
|
||||
@taskTextLightColor: white;
|
||||
@taskTextDarkColor: @text;
|
||||
|
||||
@todayLineColor: @critBkgColor;
|
||||
@todayLineColor: @critBkgColor;
|
||||
|
||||
@@ -64,13 +64,13 @@ describe('when cloning CSS ', function () {
|
||||
|
||||
function addStyleToDocument () {
|
||||
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)
|
||||
}
|
||||
|
||||
function addSecondStyleToDocument () {
|
||||
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)
|
||||
}
|
||||
|
||||
@@ -146,7 +146,7 @@ describe('when cloning CSS ', function () {
|
||||
var svg = generateSVG()
|
||||
addStyleToDocument()
|
||||
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 () {
|
||||
@@ -154,7 +154,7 @@ describe('when cloning CSS ', function () {
|
||||
addStyleToDocument()
|
||||
addSecondStyleToDocument()
|
||||
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 () {
|
||||
@@ -163,14 +163,14 @@ describe('when cloning CSS ', function () {
|
||||
addSecondStyleToDocument()
|
||||
addMermaidSVGwithStyleToDocument()
|
||||
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 () {
|
||||
var svg = generateSVG()
|
||||
addStyleToDocument()
|
||||
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 () {
|
||||
@@ -178,13 +178,13 @@ describe('when cloning CSS ', function () {
|
||||
addStyleToDocument()
|
||||
utils.cloneCssStyles(svg, {
|
||||
'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'] }
|
||||
})
|
||||
expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#ffffff; stroke-width:1.5px; }',
|
||||
'.node { stroke: #eeeeee;}',
|
||||
'.node-square { stroke: #bbbbbb;}',
|
||||
'#mermaid-01 .node-square>rect, .node-square>polygon, .node-square>circle, .node-square>ellipse { fill:#eeeeee; stroke:#aaaaaa; }',
|
||||
'.node { stroke: rgb(238, 238, 238);}',
|
||||
'.node-square { stroke: rgb(187, 187, 187);}',
|
||||
'#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; }'
|
||||
])
|
||||
})
|
||||
|
||||
@@ -13,9 +13,6 @@
|
||||
});
|
||||
$(function(){
|
||||
var graphDefinition = 'graph TB\na-->b';
|
||||
// var cb = function(html){
|
||||
// console.log(html);
|
||||
// }
|
||||
console.log(mermaidAPI.render(graphDefinition));
|
||||
console.log(mermaidAPI.render('id',graphDefinition));
|
||||
});
|
||||
@@ -24,4 +21,4 @@
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
|
||||
body {
|
||||
background: #fcfcfe;
|
||||
font-family: Helvetica;
|
||||
}
|
||||
.mermaid {
|
||||
/* width:400px;*/
|
||||
}
|
||||
|
||||
.actor {
|
||||
stroke: #CCCCFF;
|
||||
fill: #ECECFF;
|
||||
@@ -80,4 +77,4 @@ text.actor {
|
||||
stroke:none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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": {
|
||||
"gulp": "^3.8.10"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "MIT"
|
||||
}
|
||||
|
||||
20
todo.md
20
todo.md
@@ -1,14 +1,18 @@
|
||||
- upgrade d3 to version 4
|
||||
- use external d3-textwrap library
|
||||
- Upgrade d3 to version 4
|
||||
- Use external d3-textwrap library
|
||||
- Problem is it's for d3 v4 only
|
||||
- node console output colors like Chrome console
|
||||
- default theme doesn't work for class diagram
|
||||
- compile less to css
|
||||
- don't version control generated content, move them to outside project
|
||||
- Make node console output colors like Chrome console
|
||||
- Don't version control generated content, move them to outside project
|
||||
- editor
|
||||
- dist
|
||||
- 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'
|
||||
- babel-plugin-transform-remove-strict-mode
|
||||
- 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 nodeExternals from 'webpack-node-externals'
|
||||
import ExtractTextPlugin from 'extract-text-webpack-plugin'
|
||||
|
||||
export const webConfig = () => {
|
||||
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()
|
||||
config2.externals = ['fs', 'd3']
|
||||
config2.output.filename = '[name].slim.js'
|
||||
const slimConfig = webConfig()
|
||||
slimConfig.externals = ['fs', 'd3']
|
||||
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()
|
||||
config1.output.filename = '[name].min.js'
|
||||
const minConfig = webConfig()
|
||||
minConfig.output.filename = '[name].min.js'
|
||||
|
||||
const config2 = webConfig()
|
||||
config2.externals = ['fs', 'd3']
|
||||
config2.output.filename = '[name].slim.min.js'
|
||||
const slimMinConfig = webConfig()
|
||||
slimMinConfig.externals = ['fs', 'd3']
|
||||
slimMinConfig.output.filename = '[name].slim.min.js'
|
||||
|
||||
const config3 = nodeConfig()
|
||||
config3.output.filename = '[name].min.js'
|
||||
const apiMinConfig = nodeConfig()
|
||||
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