marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-14 04:49:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'pebr/neo-style' into alanaV11

Browse Source
This commit is contained in:
Per Brolin
2024-06-11 13:44:41 +02:00
parent 58f5f4a35d a9aa8b7f1a
commit efe8573c06
41 changed files with 628 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
cypress/platform/per.html
View File

@@ -4,16 +4,35 @@
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<style>
body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
/* background: #333; */
font-family: 'Arial';
/* font-size: 18px !important; */
}
@@ -25,6 +44,15 @@
}
.mermaid svg {
/* font-size: 18px !important; */
/* background-color: #efefef;
background-image: radial-gradient(#fff 51%, transparent 91%),
radial-gradient(#fff 51%, transparent 91%);
background-size: 20px 20px;
background-position:
0 0,
10px 10px;
background-repeat: repeat; */
}
.malware {
position: fixed;
@@ -41,34 +69,68 @@
font-family: monospace;
font-size: 72px;
}
/* tspan {
font-size: 6px !important;
} */
</style>
</head>
<body>
<div>Security check</div>
<pre id="diagram" class="mermaid">
flowchart LR
A-->B
</pre
>
<pre id="diagram" class="mermaid2">
mindmap
root
ch1
ch2
</pre
stateDiagram-v2
direction LR
[*] --> Active
state Active {
direction BT
[*] --> Inner
Inner --> NumLockOn : EvNumLockPressed
}
%% Outer --> Inner
</pre
>
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
<script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
<script src="./packages/mermaid/dist/mermaid.esm.mjs"></script>
<script>
<pre id="diagram" class="mermaid">
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
</pre
>
<script type="module">
import mermaid from './mermaid.esm.mjs';
import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
console.error('Mermaid error: ', err);
};
mermaid.initialize({
startOnLoad: true,
theme: 'neo',
handdrawnSeed: 12,
look: 'neo',
'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre',
// layout: 'elk',
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
// fontFamily: 'Kalam',
fontFamily: 'Arial',
sequence: {
actorFontFamily: 'arial',
noteFontFamily: 'arial',
messageFontFamily: 'arial',
},
fontSize: 12,
logLevel: 0,
basePath: './packages/',
// themeVariables: {relationLabelColor: 'red'}
});
function callback() {
alert('It worked');
@@ -77,6 +139,10 @@ A-->B
console.error('In parse error:');
console.error(err);
};
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
</script>
</body>
</html>

2
packages/mermaid/src/config.type.ts
View File

@@ -68,7 +68,7 @@ export interface MermaidConfig {
* Defines which main look to use for the diagram.
*
*/
look?: 'classic' | 'handdrawn' | 'slick';
look?: 'classic' | 'handdrawn' | 'neo';
/**
* Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
*

1
packages/mermaid/src/dagre-wrapper/edgeMarker.ts
View File

@@ -29,6 +29,7 @@ const arrowTypesMap = {
arrow_cross: 'cross',
arrow_point: 'point',
arrow_barb: 'barb',
arrow_neo: 'barbNeo',
arrow_circle: 'circle',
aggregation: 'aggregation',
extension: 'extension',

19
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@@ -775,12 +775,12 @@ const addNodeFromVertex = (
parentDB: Map<string, string>,
subGraphDB: Map<string, boolean>,
config: any,
useRough: boolean
look: string
): Node => {
let parentId = parentDB.get(vertex.id);
let isGroup = subGraphDB.get(vertex.id) || false;
const parentId = parentDB.get(vertex.id);
const isGroup = subGraphDB.get(vertex.id) || false;
let node = findNode(nodes, vertex.id);
const node = findNode(nodes, vertex.id);
if (!node) {
nodes.push({
id: vertex.id,
@@ -795,7 +795,7 @@ const addNodeFromVertex = (
domId: vertex.domId,
type: isGroup ? 'group' : undefined,
isGroup,
useRough,
look,
});
}
};
@@ -807,7 +807,6 @@ export const getData = () => {
// extract(getRootDocV2());
// const diagramStates = getStates();
const useRough = config.look === 'handdrawn';
const subGraphs = getSubGraphs();
log.info('Subgraphs - APA12', subGraphs);
const parentDB = new Map<string, string>();
@@ -834,14 +833,14 @@ export const getData = () => {
domId: subGraph.domId,
type: 'group',
isGroup: true,
useRough,
look: config.look,
});
}
console.log('APA12 nodes - 1', nodes.length);
const n = getVertices();
n.forEach((vertex) => {
const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, useRough);
const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, config.look);
if (node) {
nodes.push(node);
}
@@ -874,14 +873,12 @@ export const getData = () => {
// domId: verawEdgertex.domId,
// rawEdge: undefined,
// isGroup: false,
useRough,
look: config.look,
};
// console.log('rawEdge SPLIT', rawEdge, index);
edges.push(edge);
});
//const useRough = config.look === 'handdrawn';
return { nodes, edges, other: {}, config };
};

48
packages/mermaid/src/diagrams/state/dataFetcher.js
View File

@@ -54,39 +54,23 @@ export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOM
return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`;
}
const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, useRough, look) => {
const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, look) => {
// graphItemCount = 0;
log.trace('items', doc);
doc.forEach((item) => {
switch (item.stmt) {
case STMT_STATE:
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look);
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
break;
case DEFAULT_STATE_TYPE:
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look);
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
break;
case STMT_RELATION:
{
dataFetcher(
parentParsedItem,
item.state1,
diagramStates,
nodes,
edges,
altFlag,
useRough,
look
);
dataFetcher(
parentParsedItem,
item.state2,
diagramStates,
nodes,
edges,
altFlag,
useRough,
look
);
dataFetcher(parentParsedItem, item.state1, diagramStates, nodes, edges, altFlag, look);
dataFetcher(parentParsedItem, item.state2, diagramStates, nodes, edges, altFlag, look);
const edgeData = {
id: 'edge' + graphItemCount,
start: item.state1.id,
@@ -101,7 +85,6 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u
labelType: G_EDGE_LABELTYPE,
thickness: G_EDGE_THICKNESS,
classes: CSS_EDGE,
useRough,
look,
};
edges.push(edgeData);
@@ -225,16 +208,7 @@ function getClassesFromDbInfo(dbInfoItem) {
}
}
}
export const dataFetcher = (
parent,
parsedItem,
diagramStates,
nodes,
edges,
altFlag,
useRough,
look
) => {
export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, look) => {
const itemId = parsedItem.id;
const classStr = getClassesFromDbInfo(diagramStates.get(itemId));
@@ -324,7 +298,6 @@ export const dataFetcher = (
padding: 8,
rx: 10,
ry: 10,
useRough,
look,
};
@@ -354,7 +327,6 @@ export const dataFetcher = (
type: newNode.type,
isGroup: newNode.type === 'group',
padding: 0, //getConfig().flowchart.padding
useRough,
look,
position: parsedItem.note.position,
};
@@ -369,7 +341,6 @@ export const dataFetcher = (
type: 'group',
isGroup: true,
padding: 16, //getConfig().flowchart.padding
useRough,
look,
position: parsedItem.note.position,
};
@@ -410,7 +381,6 @@ export const dataFetcher = (
labelpos: G_EDGE_LABELPOS,
labelType: G_EDGE_LABELTYPE,
thickness: G_EDGE_THICKNESS,
useRough,
look,
});
} else {
@@ -419,7 +389,7 @@ export const dataFetcher = (
}
if (parsedItem.doc) {
log.trace('Adding nodes children ');
setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough, look);
setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, look);
}
};

4
packages/mermaid/src/diagrams/state/stateDb.js
View File

@@ -581,10 +581,10 @@ export const getData = () => {
// }
const diagramStates = getStates();
const config = getConfig();
const useRough = config.look === 'handdrawn';
const look = config.look;
resetDataFetching();
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough, look);
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look);
return { nodes, edges, other: {}, config };
};

2
packages/mermaid/src/diagrams/state/stateRenderer-v2.js
View File

@@ -333,7 +333,7 @@ const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) =
counter: graphItemCount,
}),
arrowhead: 'normal',
arrowTypeEnd: 'arrow_barb',
arrowTypeEnd: 'arrow_neo',
style: G_EDGE_STYLE,
labelStyle: '',
label: common.sanitizeText(item.description, getConfig()),

7
packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
View File

@@ -79,7 +79,12 @@ export const draw = async function (
data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
// @ts-expect-error TODO: Will be fixed after config refactor
data4Layout.rankSpacing = conf?.rankSpacing || 50;
data4Layout.markers = ['barb'];
const config = getConfig();
if (config.look === 'neo') {
data4Layout.markers = ['barbNeo'];
} else {
data4Layout.markers = ['barb'];
}
data4Layout.diagramId = id;
// console.log('REF1:', data4Layout);
await render(data4Layout, svg, element, positions);

20
packages/mermaid/src/diagrams/state/styles.js
View File

@@ -127,22 +127,23 @@ g.stateGroup line {
}
.statediagram-cluster rect.outer {
rx: 5px;
ry: 5px;
rx: ${options.radius}px;
ry: ${options.radius}px;
}
.statediagram-state .divider {
stroke: ${options.stateBorder || options.nodeBorder};
}
.statediagram-state .title-state {
rx: 5px;
ry: 5px;
rx: ${options.radius}px;
ry: ${options.radius}px;
}
.statediagram-cluster.statediagram-cluster .inner {
fill: ${options.compositeBackground || options.background};
}
.statediagram-cluster.statediagram-cluster-alt .inner {
fill: ${options.altBackground ? options.altBackground : '#efefef'};
}
.statediagram-cluster .inner {
@@ -151,9 +152,16 @@ g.stateGroup line {
}
.statediagram-state rect.basic {
rx: 5px;
ry: 5px;
rx: ${options.radius}px;
ry: ${options.radius}px;
}
.state-shadow-neo {
filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
}
.statediagram-state rect.divider {
stroke-dasharray: 10,10;
fill: ${options.altBackground ? options.altBackground : '#efefef'};

35
packages/mermaid/src/rendering-util/rendering-elements/clusters.js
View File

@@ -10,12 +10,16 @@ import createLabel from './createLabel.js';
import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
// Helper function to calculate the offset correction for the label
const calcLabelOffsetCorrection = (diff) => {
return diff * 0.75 - 6;
};
const rect = (parent, node) => {
log.info('Creating subgraph rect for ', node.id, node);
const siteConfig = getConfig();
const { themeVariables, handdrawnSeed } = siteConfig;
const { clusterBkg, clusterBorder } = themeVariables;
let { useRough } = node;
// Add outer g element
const shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id);
@@ -60,7 +64,7 @@ const rect = (parent, node) => {
log.trace('Data ', node, JSON.stringify(node));
let rect;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {
@@ -215,10 +219,10 @@ const roundedWithTitle = (parent, node) => {
const innerY = node.y - node.height / 2 - halfPadding + bbox.height - 1;
const height = node.height + padding;
const innerHeight = node.height + padding - bbox.height - 3;
const look = siteConfig.look;
// add the rect
let rect;
if (node.useRough) {
if (node.look === 'handdrawn') {
const isAlt = node.cssClasses.includes('statediagram-cluster-alt');
const rc = rough.svg(shapeSvg);
const roughOuterNode =
@@ -244,9 +248,16 @@ const roundedWithTitle = (parent, node) => {
innerRect = shapeSvg.insert(() => roughInnerNode);
} else {
rect = outerRectG.insert('rect', ':first-child');
let outerRectClass = 'outer';
if (look === 'neo') {
outerRectClass = 'outer state-shadow-neo';
} else {
outerRectClass = 'outer';
}
// center the rect around its coordinate
rect
.attr('class', 'outer')
.attr('class', outerRectClass)
.attr('x', x)
.attr('y', y)
.attr('width', width)
@@ -259,16 +270,12 @@ const roundedWithTitle = (parent, node) => {
.attr('height', innerHeight);
}
// Center the label
let diff = bbox.height - (innerY - y) / 2;
let correction = calcLabelOffsetCorrection(diff, bbox.height);
label.attr(
'transform',
`translate(${node.x - bbox.width / 2}, ${
node.y -
node.height / 2 -
node.padding +
bbox.height / 2 -
(evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)
})`
`translate(${node.x - bbox.width / 2}, ${(innerY - y) / 2 - correction})`
);
const rectBox = rect.node().getBBox();
@@ -300,7 +307,7 @@ const divider = (parent, node) => {
const y = node.y - node.height / 2;
const width = node.width + padding;
const height = node.height + padding;
if (node.useRough) {
if (node.look === 'handdrawn') {
const rc = rough.svg(shapeSvg);
const roughNode = rc.rectangle(x, y, width, height, {
fill: 'lightgrey',

3
packages/mermaid/src/rendering-util/rendering-elements/edges.js
View File

@@ -594,11 +594,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
default:
strokeClasses += ' edge-pattern-solid';
}
let useRough = edge.useRough;
let svgPath;
let path = '';
let linePath = lineFunction(lineData);
if (useRough) {
if (edge.look === 'handdrawn') {
const rc = rough.svg(elem);
const ld = Object.assign([], lineData);
// const svgPathNode = rc.path(lineFunction(ld.splice(0, ld.length-1)), {

15
packages/mermaid/src/rendering-util/rendering-elements/markers.js
View File

@@ -277,6 +277,20 @@ const barb = (elem, type, id) => {
.append('path')
.attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
};
const barbNeo = (elem, type, id) => {
elem
.append('defs')
.append('marker')
.attr('id', id + '_' + type + '-barbEnd')
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
.attr('markerHeight', 14)
.attr('markerUnits', 'strokeWidth')
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 19,7 L11,14 L13,7 L11,0 Z');
};
// TODO rename the class diagram markers to something shape descriptive and semantic free
const markers = {
@@ -289,5 +303,6 @@ const markers = {
circle,
cross,
barb,
barbNeo,
};
export default insertMarkers;

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
View File

@@ -22,7 +22,7 @@ export const choice = (parent: SVG, node: Node) => {
];
let choice;
if (node.useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const pointArr = points.map(function (d) {

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
View File

@@ -15,9 +15,9 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
const radius = bbox.width / 2 + halfPadding;
let circleElem;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
View File

@@ -68,9 +68,9 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
const h = bbox.height + ry + node.padding;
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore
const rc = rough.svg(shapeSvg);
const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
View File

@@ -18,9 +18,9 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
const innerRadius = bbox.width / 2 + halfPadding;
let circleGroup;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore
const rc = rough.svg(shapeSvg);
const outerOptions = userNodeOverrides(node, { roughness: 0.2, strokeWidth: 2.5 });

31
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@@ -1,12 +1,15 @@
import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
import { createRoundedRectPathD } from './roundedRectPath.js';
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
import rough from 'roughjs';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {
const { themeVariables, handdrawnSeed, look } = getConfig();
const { nodeBorder, mainBkg } = themeVariables;
const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent,
node,
@@ -14,21 +17,22 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
true
);
const totalWidth = Math.max(bbox.width + node.padding, node?.width || 0);
const totalHeight = Math.max(bbox.height + node.padding, node?.height || 0);
const totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0);
const totalHeight = Math.max(bbox.height + options.labelPaddingY * 2, node?.height || 0);
const x = -totalWidth / 2;
const y = -totalHeight / 2;
let rect;
let { rx, ry, cssStyles, useRough } = node;
node.look = look;
let { rx, ry } = node;
const { cssStyles } = node;
//use options rx, ry overrides if present
if (options && options.rx && options.ry) {
rx = options.rx;
ry = options.ry;
}
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@@ -40,6 +44,21 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
rect = shapeSvg.insert(() => roughNode, ':first-child');
rect.attr('class', 'basic label-container').attr('style', cssStyles);
} else if (node.look === 'neo') {
// TODO: Take theme and look into account
rect = shapeSvg.insert('rect', ':first-child');
rect
.attr('class', 'basic label-container state-shadow-neo')
.attr('style', cssStyles)
.attr('rx', rx)
.attr('data-id', 'abc')
.attr('data-et', 'node')
.attr('ry', ry)
.attr('x', x)
.attr('y', y)
.attr('width', totalWidth)
.attr('height', totalHeight);
} else {
rect = shapeSvg.insert('rect', ':first-child');

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
View File

@@ -25,7 +25,7 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => {
const y = (-1 * height) / 2;
let shape;
if (node.useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor));

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
View File

@@ -56,9 +56,9 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
View File

@@ -43,9 +43,9 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
View File

@@ -42,9 +42,9 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
View File

@@ -42,9 +42,9 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
View File

@@ -21,14 +21,14 @@ export const note = async (parent: SVGAElement, node: Node) => {
);
log.info('Classes = ', node.cssClasses);
const { cssStyles, useRough } = node;
const { cssStyles } = node;
let rect;
const totalWidth = bbox.width + node.padding;
const totalHeight = bbox.height + node.padding;
const x = -bbox.width / 2 - halfPadding;
const y = -bbox.height / 2 - halfPadding;
if (useRough) {
if (node.look === 'handdrawn') {
// add the rect
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
View File

@@ -38,9 +38,9 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
View File

@@ -42,9 +42,9 @@ export const rect_left_inv_arrow = async (
];
let polygon;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

10
packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
View File

@@ -1,10 +1,16 @@
import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
import { drawRect } from './drawRect.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
export const roundedRect = async (parent: SVGAElement, node: Node) => {
const { look } = getConfig();
node.look = look;
const options = {
rx: 5,
ry: 5,
rx: node.look === 'neo' ? 1 : 5,
ry: node.look === 'neo' ? 1 : 5,
labelPaddingX: node.padding * 2,
labelPaddingY: node.padding * 1,
classes: '',
} as RectOptions;

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
View File

@@ -58,8 +58,8 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
const w = bbox.width + h / 4 + node.padding;
let rect;
const { cssStyles, useRough } = node;
if (useRough) {
const { cssStyles } = node;
if (node.look === 'handdrawn') {
// @ts-ignore
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
View File

@@ -1,10 +1,14 @@
import type { Node } from '$root/rendering-util/types.d.ts';
import { drawRect } from './drawRect.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
export const state = async (parent: SVGAElement, node: Node) => {
const { look } = getConfig();
node.look = look;
const options = {
rx: 5,
ry: 5,
rx: node.look === 'neo' ? 2 : 5,
ry: node.look === 'neo' ? 2 : 5,
classes: 'flowchart-node',
};
return drawRect(parent, node, options);

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
View File

@@ -17,7 +17,7 @@ export const stateEnd = (parent: SVG, node: Node) => {
let circle;
let innerCircle;
if (node.useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 });

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
View File

@@ -17,7 +17,7 @@ export const stateStart = (parent: SVG, node: Node) => {
.attr('id', node.domId || node.id);
let circle;
if (node.useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor));

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
View File

@@ -40,7 +40,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
const x = -bbox.width / 2 - halfPadding;
const y = -bbox.height / 2 - halfPadding;
let rect;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
const points = [
{ x: 0, y: 0 },
{ x: w, y: 0 },
@@ -54,7 +54,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
{ x: -8, y: 0 },
];
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

6
packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
View File

@@ -42,10 +42,10 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
console.log('Trapezoid: Inside use useRough');
if (node.look === 'handdrawn') {
console.log('Trapezoid: Inside use handdrawn');
// @ts-ignore
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

9
packages/mermaid/src/rendering-util/types.d.ts vendored
View File

@@ -46,7 +46,6 @@ interface Node {
rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.
ry?: number;
useRough?: boolean;
useHtmlLabels?: boolean;
centerLabel?: boolean; //keep for now.
//Candidate for removal, maybe rely on labelStyle or a specific property labelPosition: Top, Center, Bottom
@@ -61,6 +60,9 @@ interface Node {
// Flowchart specific properties
x?: number;
y?: number;
// Added look to handle
look?: string;
}
// Common properties for any edge in the system
@@ -91,12 +93,15 @@ interface Edge {
minlen?: number;
pattern?: string;
thickness?: 'normal' | 'thick' | 'invisible';
useRough?: boolean;
look?: string;
}
interface RectOptions {
rx: number;
ry: number;
labelPaddingX: number;
labelPaddingY: number;
classes: string;
}

4
packages/mermaid/src/styles.ts
View File

@@ -69,7 +69,9 @@ const getStyles = (
}
${diagramStyles}
.node .neo-node {
stroke: ${options.nodeBorder};
}
${userStyles}
`;
};

4
packages/mermaid/src/themes/index.js
View File

@@ -3,6 +3,7 @@ import { getThemeVariables as darkThemeVariables } from './theme-dark.js';
import { getThemeVariables as defaultThemeVariables } from './theme-default.js';
import { getThemeVariables as forestThemeVariables } from './theme-forest.js';
import { getThemeVariables as neutralThemeVariables } from './theme-neutral.js';
import { getThemeVariables as neoThemeVariables } from './theme-neo.js';
export default {
base: {
@@ -20,4 +21,7 @@ export default {
neutral: {
getThemeVariables: neutralThemeVariables,
},
neo: {
getThemeVariables: neoThemeVariables,
},
};

2
packages/mermaid/src/themes/theme-base.js
View File

@@ -20,7 +20,7 @@ class Theme {
this.noteTextColor = '#333';
this.THEME_COLOR_LIMIT = 12;
this.radius = 5;
// dark
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';

1
packages/mermaid/src/themes/theme-dark.js
View File

@@ -29,6 +29,7 @@ class Theme {
this.labelBackground = '#181818';
this.textColor = '#ccc';
this.THEME_COLOR_LIMIT = 12;
this.radius = 5;
/* Flowchart variables */
this.nodeBkg = 'calculated';

1
packages/mermaid/src/themes/theme-default.js
View File

@@ -37,6 +37,7 @@ class Theme {
this.labelBackground = '#e8e8e8';
this.textColor = '#333';
this.THEME_COLOR_LIMIT = 12;
this.radius = 5;
/* Flowchart variables */

1
packages/mermaid/src/themes/theme-forest.js
View File

@@ -31,6 +31,7 @@ class Theme {
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.THEME_COLOR_LIMIT = 12;
this.radius = 5;
/* Flowchart variables */
this.nodeBkg = 'calculated';

373
packages/mermaid/src/themes/theme-neo.js Normal file
View File

@@ -0,0 +1,373 @@
import { darken, lighten, adjust, invert, isDark, toRgba } from 'khroma';
import { mkBorder } from './theme-helpers.js';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
} from './erDiagram-oldHardcodedValues.js';
class Theme {
constructor() {
/** # Base variables */
/**
* - Background - used to know what the background color is of the diagram. This is used for
* deducing colors for instance line color. Default value is #f4f4f4.
*/
this.background = '#ffffff';
this.primaryColor = '#cccccc';
//this.mainBkg = '#ffffff';
this.mainBkg = '#ecedfe';
this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333';
this.THEME_COLOR_LIMIT = 12;
this.radius = 3;
// dark
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
this.fontSize = '10px';
// Neo-specific
this.nodeBorder = 'none';
this.stateBorder = 'none';
}
updateColors() {
// The || is to make sure that if the variable has been defined by a user override that value is to be used
/* Main */
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor);
this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor =
this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor =
this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
this.noteBkgColor = this.noteBkgColor || '#fff5ad';
this.noteTextColor = this.noteTextColor || '#333';
this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
this.lineColor = this.lineColor || invert(this.background);
this.arrowheadColor = this.arrowheadColor || invert(this.background);
this.textColor = this.textColor || this.primaryTextColor;
// TODO: should this instead default to secondaryBorderColor?
this.border2 = this.border2 || this.tertiaryBorderColor;
/* Flowchart variables */
this.nodeBkg = this.nodeBkg || this.primaryColor;
this.mainBkg = this.mainBkg || this.primaryColor;
this.nodeBorder = this.nodeBorder || this.primaryBorderColor;
this.clusterBkg = this.clusterBkg || this.tertiaryColor;
this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
this.defaultLinkColor = this.defaultLinkColor || this.lineColor;
this.titleColor = this.titleColor || this.tertiaryTextColor;
this.edgeLabelBackground =
this.edgeLabelBackground ||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
/* Sequence Diagram variables */
// this.actorBorder = lighten(this.border1, 0.5);
this.actorBorder = this.actorBorder || this.primaryBorderColor;
this.actorBkg = this.actorBkg || this.mainBkg;
this.actorTextColor = this.actorTextColor || this.primaryTextColor;
this.actorLineColor = this.actorLineColor || this.actorBorder;
this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;
this.signalColor = this.signalColor || this.textColor;
this.signalTextColor = this.signalTextColor || this.textColor;
this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;
this.labelTextColor = this.labelTextColor || this.actorTextColor;
this.loopTextColor = this.loopTextColor || this.actorTextColor;
this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);
this.activationBkgColor = this.activationBkgColor || this.secondaryColor;
this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);
/* Gantt chart variables */
this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor;
this.altSectionBkgColor = this.altSectionBkgColor || 'white';
this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;
this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;
this.excludeBkgColor = this.excludeBkgColor || '#eeeeee';
this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;
this.taskBkgColor = this.taskBkgColor || this.primaryColor;
this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;
this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23);
this.gridColor = this.gridColor || 'lightgrey';
this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey';
this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey';
this.critBorderColor = this.critBorderColor || '#ff8888';
this.critBkgColor = this.critBkgColor || 'red';
this.todayLineColor = this.todayLineColor || 'red';
this.taskTextColor = this.taskTextColor || this.textColor;
this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;
this.taskTextLightColor = this.taskTextLightColor || this.textColor;
this.taskTextColor = this.taskTextColor || this.primaryTextColor;
this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;
this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
/* Sequence Diagram variables */
this.personBorder = this.personBorder || this.primaryBorderColor;
this.personBkg = this.personBkg || this.mainBkg;
/* state colors */
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
/* The color of the text tables of the states*/
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || this.tertiaryColor;
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.innerEndBackground = this.nodeBorder;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
this.transitionColor = this.transitionColor || this.lineColor;
this.specialStateColor = this.lineColor;
/* Color Scale */
/* Each color-set will have a background, a foreground and a border color */
this.cScale0 = this.cScale0 || this.primaryColor;
this.cScale1 = this.cScale1 || this.secondaryColor;
this.cScale2 = this.cScale2 || this.tertiaryColor;
this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210, l: 150 });
this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
if (this.darkMode) {
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScale' + i] = darken(this['cScale' + i], 75);
}
} else {
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScale' + i] = darken(this['cScale' + i], 25);
}
}
// Setup the inverted color for the set
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScaleInv' + i] = this['cScaleInv' + i] || invert(this['cScale' + i]);
}
// Setup the peer color for the set, useful for borders
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
if (this.darkMode) {
this['cScalePeer' + i] = this['cScalePeer' + i] || lighten(this['cScale' + i], 10);
} else {
this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 10);
}
}
// Setup the label color for the set
this.scaleLabelColor = this.scaleLabelColor || this.labelTextColor;
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
}
const multiplier = this.darkMode ? -4 : -1;
for (let i = 0; i < 5; i++) {
this['surface' + i] =
this['surface' + i] ||
adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (5 + i * 3) });
this['surfacePeer' + i] =
this['surfacePeer' + i] ||
adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (8 + i * 3) });
}
/* class */
this.classText = this.classText || this.textColor;
/* user-journey */
this.fillType0 = this.fillType0 || this.primaryColor;
this.fillType1 = this.fillType1 || this.secondaryColor;
this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });
this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });
this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });
this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });
this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });
this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });
/* pie */
this.pie1 = this.pie1 || this.primaryColor;
this.pie2 = this.pie2 || this.secondaryColor;
this.pie3 = this.pie3 || this.tertiaryColor;
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
this.pieOpacity = this.pieOpacity || '0.7';
/* quadrant-graph */
this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
this.quadrant2TextFill =
this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
this.quadrant3TextFill =
this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
this.quadrant4TextFill =
this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
this.quadrantPointFill =
this.quadrantPointFill || isDark(this.quadrant1Fill)
? lighten(this.quadrant1Fill)
: darken(this.quadrant1Fill);
this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor;
this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor;
this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor;
this.quadrantInternalBorderStrokeFill =
this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
this.quadrantExternalBorderStrokeFill =
this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
/* xychart */
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette:
this.xyChart?.plotColorPalette ||
'#FFF4DD,#FFD8B1,#FFA07A,#ECEFF1,#D6DBDF,#C3E0A8,#FFB6A4,#FFD74D,#738FA7,#FFFFF0',
};
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
this.requirementBorderSize = this.requirementBorderSize || '1';
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
this.relationColor = this.relationColor || this.lineColor;
this.relationLabelBackground =
this.relationLabelBackground ||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = this.git0 || this.primaryColor;
this.git1 = this.git1 || this.secondaryColor;
this.git2 = this.git2 || this.tertiaryColor;
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
if (this.darkMode) {
this.git0 = lighten(this.git0, 25);
this.git1 = lighten(this.git1, 25);
this.git2 = lighten(this.git2, 25);
this.git3 = lighten(this.git3, 25);
this.git4 = lighten(this.git4, 25);
this.git5 = lighten(this.git5, 25);
this.git6 = lighten(this.git6, 25);
this.git7 = lighten(this.git7, 25);
} else {
this.git0 = darken(this.git0, 25);
this.git1 = darken(this.git1, 25);
this.git2 = darken(this.git2, 25);
this.git3 = darken(this.git3, 25);
this.git4 = darken(this.git4, 25);
this.git5 = darken(this.git5, 25);
this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25);
}
this.gitInv0 = this.gitInv0 || invert(this.git0);
this.gitInv1 = this.gitInv1 || invert(this.git1);
this.gitInv2 = this.gitInv2 || invert(this.git2);
this.gitInv3 = this.gitInv3 || invert(this.git3);
this.gitInv4 = this.gitInv4 || invert(this.git4);
this.gitInv5 = this.gitInv5 || invert(this.git5);
this.gitInv6 = this.gitInv6 || invert(this.git6);
this.gitInv7 = this.gitInv7 || invert(this.git7);
this.branchLabelColor =
this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;
this.gitBranchLabel1 = this.gitBranchLabel1 || this.branchLabelColor;
this.gitBranchLabel2 = this.gitBranchLabel2 || this.branchLabelColor;
this.gitBranchLabel3 = this.gitBranchLabel3 || this.branchLabelColor;
this.gitBranchLabel4 = this.gitBranchLabel4 || this.branchLabelColor;
this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;
this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;
this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
this.tagLabelFontSize = this.tagLabelFontSize || '10px';
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */
}
calculate(overrides) {
if (typeof overrides !== 'object') {
// Calculate colors form base colors
this.updateColors();
return;
}
const keys = Object.keys(overrides);
// Copy values from overrides, this is mainly for base colors
keys.forEach((k) => {
this[k] = overrides[k];
});
// Calculate colors form base colors
this.updateColors();
// Copy values from overrides again in case of an override of derived value
keys.forEach((k) => {
this[k] = overrides[k];
});
}
}
export const getThemeVariables = (userOverrides) => {
const theme = new Theme();
theme.calculate(userOverrides);
return theme;
};

1
packages/mermaid/src/themes/theme-neutral.js
View File

@@ -42,6 +42,7 @@ class Theme {
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
this.fontSize = '16px';
this.THEME_COLOR_LIMIT = 12;
this.radius = 5;
/* Flowchart variables */