mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' of github.com:mermaid-js/mermaid into develop

This commit is contained in:
Knut Sveidqvist 2021-02-28 10:28:50 +01:00
parent d66727cb35 0c05f998e9
commit cc1eb5dd98
5 changed files with 55 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
cypress/platform/knsv.html
View File

@ -25,21 +25,17 @@
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex"> <div class="flex">
<div class="mermaid2" style="width: 50%; height: 400px;"> <div class="mermaid" style="width: 100%; height: 400px;">
graph TD %%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
A[Christmas] ==> D erDiagram
A[Christmas] -->|Get money| B(Go shopping) CUSTOMER }|..|{ DELIVERY-ADDRESS : has
A[Christmas] ==> C CUSTOMER ||--o{ ORDER : places
subgraph T ["Test"] CUSTOMER ||--o{ INVOICE : "liable for"
A DELIVERY-ADDRESS ||--o{ ORDER : receives
B INVOICE ||--|{ ORDER : covers
C ORDER ||--|{ ORDER-ITEM : includes
end PRODUCT-CATEGORY ||--|{ PRODUCT : contains
classDef Test fill:#F84E68,stroke:#333,color:white; PRODUCT ||--o{ ORDER-ITEM : "ordered in"
class A,T Test
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
</div> </div>
<div class="mermaid2" style="width: 50%; height: 400px;"> <div class="mermaid2" style="width: 50%; height: 400px;">
flowchart TD flowchart TD
@ -134,16 +130,15 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0, logLevel: 0,
flowchart: { curve: 'cardinal', htmlLabels: true }, flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: true }, sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif', fontFamily: '"arial", sans-serif',
fontFamily: 'courier', fontFamily: 'courier',
curve: 'cardinal', curve: 'cardinal',
securityLevel: 'loose', securityLevel: 'loose',
sequence:{mirrorActors:false}
}); });
function callback(){alert('It worked');} function callback(){alert('It worked');}
</script> </script>

28
src/defaultConfig.js
View File

@ -537,7 +537,7 @@ const config = {
***Default value 50**. ***Default value 50**.
*/ */
topPadding: 50, topPadding: 50,
rightPadding: 75,
/** /**
*| Parameter | Description |Type | Required | Values| *| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- | *| --- | --- | --- | --- | --- |
@ -567,17 +567,15 @@ const config = {
***Default value 11**. ***Default value 11**.
*/ */
fontSize: 11, fontSize: 11,
/** /**
*| Parameter | Description |Type | Required | Values| *| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- | *| --- | --- | --- | --- | --- |
*| fontFamily | font Family | string | required |"Open-Sans", "sans-serif" | *| sectionFontSize | Font size for secions| Integer | Required | Any Positive Value |
* *
***Notes:** ***Notes:**
* ***Default value 11**.
***Default value '"Open-Sans", "sans-serif"'**.
*/ */
fontFamily: '"Open-Sans", "sans-serif"', sectionFontSize: 11,
/** /**
*| Parameter | Description |Type | Required | Values| *| Parameter | Description |Type | Required | Values|
@ -648,7 +646,7 @@ const config = {
***Notes:** ***Notes:**
***Default value 50**. ***Default value 50**.
*/ */
actorMargin: 50, leftMargin: 150,
/** /**
*| Parameter | Description |Type | Required | Values| *| Parameter | Description |Type | Required | Values|
@ -668,7 +666,7 @@ const config = {
***Notes:** ***Notes:**
***Default value 65**. ***Default value 65**.
*/ */
height: 65, height: 50,
/** /**
*| Parameter | Description |Type | Required | Values| *| Parameter | Description |Type | Required | Values|
@ -750,7 +748,19 @@ const config = {
***Notes:**This will display arrows that start and begin at the same node as right angles, rather than a curves ***Notes:**This will display arrows that start and begin at the same node as right angles, rather than a curves
***Default value false**. ***Default value false**.
*/ */
rightAngles: false rightAngles: false,
taskFontSize: 14,
taskFontFamily: '"Open-Sans", "sans-serif"',
taskMargin: 50,
// width of activation box
activationWidth: 10,
// text placement as: tspan | fo | old only text as before
textPlacement: 'fo',
actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
sectionColours: ['#fff']
}, },
class: { class: {
arrowMarkerAbsolute: false, arrowMarkerAbsolute: false,

27
src/diagrams/gantt/ganttRenderer.js
View File

@ -11,30 +11,19 @@ import {
import { parser } from './parser/gantt'; import { parser } from './parser/gantt';
import common from '../common/common'; import common from '../common/common';
import ganttDb from './ganttDb'; import ganttDb from './ganttDb';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils'; import { configureSvgSize } from '../../utils';
parser.yy = ganttDb; parser.yy = ganttDb;
export const setConf = function() {
const conf = { // const keys = Object.keys(cnf);
titleTopMargin: 25, // keys.forEach(function(key) {
barHeight: 20, // conf[key] = cnf[key];
barGap: 4, // });
topPadding: 50,
rightPadding: 75,
leftPadding: 75,
gridLineStartPadding: 35,
fontSize: 11,
fontFamily: '"Open-Sans", "sans-serif"'
};
export const setConf = function(cnf) {
const keys = Object.keys(cnf);
keys.forEach(function(key) {
conf[key] = cnf[key];
});
}; };
let w; let w;
export const draw = function(text, id) { export const draw = function(text, id) {
const conf = getConfig().gantt;
parser.yy.clear(); parser.yy.clear();
parser.parse(text); parser.parse(text);
@ -415,6 +404,8 @@ export const draw = function(text, id) {
return (d[1] * theGap) / 2 + theTopPad; return (d[1] * theGap) / 2 + theTopPad;
} }
}) })
.attr('font-size', conf.sectionFontSize)
.attr('font-size', conf.sectionFontSize)
.attr('class', function(d) { .attr('class', function(d) {
for (let i = 0; i < categories.length; i++) { for (let i = 0; i < categories.length; i++) {
if (d[0] === categories[i]) { if (d[0] === categories[i]) {

14
src/diagrams/gantt/styles.js
View File

@ -42,8 +42,8 @@ const getStyles = options =>
.sectionTitle { .sectionTitle {
text-anchor: start; text-anchor: start;
font-size: 11px; // font-size: ${options.ganttFontSize};
text-height: 14px; // text-height: 14px;
font-family: 'trebuchet ms', verdana, arial, sans-serif; font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-family: var(--mermaid-font-family); font-family: var(--mermaid-font-family);
@ -90,14 +90,14 @@ const getStyles = options =>
font-family: var(--mermaid-font-family); font-family: var(--mermaid-font-family);
} }
.taskText:not([font-size]) { // .taskText:not([font-size]) {
font-size: 11px; // font-size: ${options.ganttFontSize};
} // }
.taskTextOutsideRight { .taskTextOutsideRight {
fill: ${options.taskTextDarkColor}; fill: ${options.taskTextDarkColor};
text-anchor: start; text-anchor: start;
font-size: 11px; // font-size: ${options.ganttFontSize};
font-family: 'trebuchet ms', verdana, arial, sans-serif; font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-family: var(--mermaid-font-family); font-family: var(--mermaid-font-family);
@ -106,7 +106,7 @@ const getStyles = options =>
.taskTextOutsideLeft { .taskTextOutsideLeft {
fill: ${options.taskTextDarkColor}; fill: ${options.taskTextDarkColor};
text-anchor: end; text-anchor: end;
font-size: 11px; // font-size: ${options.ganttFontSize};
} }
/* Special case clickable */ /* Special case clickable */

46
src/diagrams/user-journey/journeyRenderer.js
View File

@ -2,46 +2,11 @@ import { select } from 'd3';
import { parser } from './parser/journey'; import { parser } from './parser/journey';
import journeyDb from './journeyDb'; import journeyDb from './journeyDb';
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils'; import { configureSvgSize } from '../../utils';
parser.yy = journeyDb; parser.yy = journeyDb;
const conf = {
leftMargin: 150,
diagramMarginX: 50,
diagramMarginY: 20,
// Margin between tasks
taskMargin: 50,
// Width of task boxes
width: 150,
// Height of task boxes
height: 50,
taskFontSize: 14,
taskFontFamily: '"Open-Sans", "sans-serif"',
// Margin around loop boxes
boxMargin: 10,
boxTextMargin: 5,
noteMargin: 10,
// Space between messages
messageMargin: 35,
// Multiline message alignment
messageAlign: 'center',
// Depending on css styling this might need adjustment
// Projects the edge of the diagram downwards
bottomMarginAdj: 1,
// width of activation box
activationWidth: 10,
// text placement as: tspan | fo | old only text as before
textPlacement: 'fo',
actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
sectionColours: ['#fff']
};
export const setConf = function(cnf) { export const setConf = function(cnf) {
const keys = Object.keys(cnf); const keys = Object.keys(cnf);
@ -53,6 +18,7 @@ export const setConf = function(cnf) {
const actors = {}; const actors = {};
function drawActorLegend(diagram) { function drawActorLegend(diagram) {
const conf = getConfig().journey;
// Draw the actors // Draw the actors
let yPos = 60; let yPos = 60;
Object.keys(actors).forEach(person => { Object.keys(actors).forEach(person => {
@ -79,9 +45,10 @@ function drawActorLegend(diagram) {
yPos += 20; yPos += 20;
}); });
} }
const conf = getConfig().journey;
const LEFT_MARGIN = conf.leftMargin; const LEFT_MARGIN = getConfig().journey.leftMargin;
export const draw = function(text, id) { export const draw = function(text, id) {
const conf = getConfig().journey;
parser.yy.clear(); parser.yy.clear();
parser.parse(text + '\n'); parser.parse(text + '\n');
@ -166,6 +133,7 @@ export const bounds = {
} }
}, },
updateBounds: function(startx, starty, stopx, stopy) { updateBounds: function(startx, starty, stopx, stopy) {
const conf = getConfig().journey;
const _self = this; const _self = this;
let cnt = 0; let cnt = 0;
function updateFn(type) { function updateFn(type) {
@ -173,7 +141,6 @@ export const bounds = {
cnt++; cnt++;
// The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
const n = _self.sequenceItems.length - cnt + 1; const n = _self.sequenceItems.length - cnt + 1;
_self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min); _self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min);
_self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max); _self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max);
@ -221,6 +188,7 @@ const fills = conf.sectionFills;
const textColours = conf.sectionColours; const textColours = conf.sectionColours;
export const drawTasks = function(diagram, tasks, verticalPos) { export const drawTasks = function(diagram, tasks, verticalPos) {
const conf = getConfig().journey;
let lastSection = ''; let lastSection = '';
const sectionVHeight = conf.height * 2 + conf.diagramMarginY; const sectionVHeight = conf.height * 2 + conf.diagramMarginY;
const taskPos = verticalPos + sectionVHeight; const taskPos = verticalPos + sectionVHeight;