marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-08 06:44:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3151 from pinghe/develop

Browse Source 
Add C4 Diagram. Compatible with C4-PlantUML syntax (2). #3038
This commit is contained in:
Ashish Jain
2022-06-28 19:10:42 +02:00
committed by GitHub
parent ccabcca55b 0c5b4948cf
commit cc45f3ca01
9 changed files with 1352 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
src/defaultConfig.js
View File

@@ -1084,14 +1084,21 @@ const config = {
diagramMarginY: 10,
/**
* | Parameter | Description | Type | Required | Values |
* | ----------- | --------------------- | ------- | -------- | ------------------ |
* | shapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
* | Parameter | Description | Type | Required | Values |
* | ------------- | --------------------- | ------- | -------- | ------------------ |
* | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
*
* **Notes:** Default value: 50
*/
c4ShapeMargin: 50,
/**
* | Parameter | Description | Type | Required | Values |
* | -------------- | ---------------------- | ------- | -------- | ------------------ |
* | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
*
* **Notes:** Default value: 20
*/
c4ShapePadding: 20,
/**
@@ -1113,9 +1120,9 @@ const config = {
height: 60,
/**
* | Parameter | Description | Type | Required | Values |
* | --------- | ------------------------ | ------- | -------- | ------------------ |
* | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
* | Parameter | Description | Type | Required | Values |
* | --------- | ------------------- | ------- | -------- | ------------------ |
* | boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
*
* **Notes:** Default value: 10
*/
@@ -1133,97 +1140,446 @@ const config = {
*/
useMaxWidth: true,
/**
* | Parameter | Description | Type | Required | Values |
* | ------------ | ----------- | ------- | -------- | ------------------ |
* | c4ShapeInRow | See Notes | Integer | Required | Any Positive Value |
*
* **Notes:** How many shapes to place in each row.
*
* Default value: 4
*/
c4ShapeInRow: 4,
nextLinePaddingX: 0,
/**
* | Parameter | Description | Type | Required | Values |
* | --------------- | ----------- | ------- | -------- | ------------------ |
* | c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value |
*
* **Notes:** How many boundarys to place in each row.
*
* Default value: 2
*/
c4BoundaryInRow: 2,
/**
* This sets the font size of Person shape for the diagram
*
* **Notes:** Default value: 14.
*/
personFontSize: 14,
/**
* This sets the font family of Person shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
personFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of Person shape for the diagram
*
* **Notes:** Default value: normal.
*/
personFontWeight: 'normal',
/**
* This sets the font size of External Person shape for the diagram
*
* **Notes:** Default value: 14.
*/
external_personFontSize: 14,
/**
* This sets the font family of External Person shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
external_personFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of External Person shape for the diagram
*
* **Notes:** Default value: normal.
*/
external_personFontWeight: 'normal',
/**
* This sets the font size of System shape for the diagram
*
* **Notes:** Default value: 14.
*/
systemFontSize: 14,
/**
* This sets the font family of System shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
systemFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of System shape for the diagram
*
* **Notes:** Default value: normal.
*/
systemFontWeight: 'normal',
/**
* This sets the font size of External System shape for the diagram
*
* **Notes:** Default value: 14.
*/
external_systemFontSize: 14,
/**
* This sets the font family of External System shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
external_systemFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of External System shape for the diagram
*
* **Notes:** Default value: normal.
*/
external_systemFontWeight: 'normal',
/**
* This sets the font size of System DB shape for the diagram
*
* **Notes:** Default value: 14.
*/
system_dbFontSize: 14,
/**
* This sets the font family of System DB shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
system_dbFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of System DB shape for the diagram
*
* **Notes:** Default value: normal.
*/
system_dbFontWeight: 'normal',
/**
* This sets the font size of External System DB shape for the diagram
*
* **Notes:** Default value: 14.
*/
external_system_dbFontSize: 14,
/**
* This sets the font family of External System DB shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
external_system_dbFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of External System DB shape for the diagram
*
* **Notes:** Default value: normal.
*/
external_system_dbFontWeight: 'normal',
/**
* This sets the font size of System Queue shape for the diagram
*
* **Notes:** Default value: 14.
*/
system_queueFontSize: 14,
/**
* This sets the font family of System Queue shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
system_queueFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of System Queue shape for the diagram
*
* **Notes:** Default value: normal.
*/
system_queueFontWeight: 'normal',
/**
* This sets the font size of External System Queue shape for the diagram
*
* **Notes:** Default value: 14.
*/
external_system_queueFontSize: 14,
/**
* This sets the font family of External System Queue shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
external_system_queueFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of External System Queue shape for the diagram
*
* **Notes:** Default value: normal.
*/
external_system_queueFontWeight: 'normal',
/**
* This sets the font size of Boundary shape for the diagram
*
* **Notes:** Default value: 14.
*/
boundaryFontSize: 14,
/**
* This sets the font family of Boundary shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
boundaryFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of Boundary shape for the diagram
*
* **Notes:** Default value: normal.
*/
boundaryFontWeight: 'normal',
/**
* This sets the font size of Message shape for the diagram
*
* **Notes:** Default value: 12.
*/
messageFontSize: 12,
/**
* This sets the font family of Message shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
messageFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of Message shape for the diagram
*
* **Notes:** Default value: normal.
*/
messageFontWeight: 'normal',
/**
* This sets the font size of Container shape for the diagram
*
* **Notes:** Default value: 14.
*/
containerFontSize: 14,
/**
* This sets the font family of Container shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
containerFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of Container shape for the diagram
*
* **Notes:** Default value: normal.
*/
containerFontWeight: 'normal',
/**
* This sets the font size of External Container shape for the diagram
*
* **Notes:** Default value: 14.
*/
external_containerFontSize: 14,
/**
* This sets the font family of External Container shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
external_containerFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of External Container shape for the diagram
*
* **Notes:** Default value: normal.
*/
external_containerFontWeight: 'normal',
/**
* This sets the font size of Container DB shape for the diagram
*
* **Notes:** Default value: 14.
*/
container_dbFontSize: 14,
/**
* This sets the font family of Container DB shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
container_dbFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of Container DB shape for the diagram
*
* **Notes:** Default value: normal.
*/
container_dbFontWeight: 'normal',
/**
* This sets the font size of External Container DB shape for the diagram
*
* **Notes:** Default value: 14.
*/
external_container_dbFontSize: 14,
/**
* This sets the font family of External Container DB shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
external_container_dbFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of External Container DB shape for the diagram
*
* **Notes:** Default value: normal.
*/
external_container_dbFontWeight: 'normal',
/**
* This sets the font size of Container Queue shape for the diagram
*
* **Notes:** Default value: 14.
*/
container_queueFontSize: 14,
/**
* This sets the font family of Container Queue shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
container_queueFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of Container Queue shape for the diagram
*
* **Notes:** Default value: normal.
*/
container_queueFontWeight: 'normal',
/**
* This sets the font size of External Container Queue shape for the diagram
*
* **Notes:** Default value: 14.
*/
external_container_queueFontSize: 14,
/**
* This sets the font family of External Container Queue shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
external_container_queueFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of External Container Queue shape for the diagram
*
* **Notes:** Default value: normal.
*/
external_container_queueFontWeight: 'normal',
/**
* This sets the font size of Component shape for the diagram
*
* **Notes:** Default value: 14.
*/
componentFontSize: 14,
/**
* This sets the font family of Component shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
componentFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of Component shape for the diagram
*
* **Notes:** Default value: normal.
*/
componentFontWeight: 'normal',
/**
* This sets the font size of External Component shape for the diagram
*
* **Notes:** Default value: 14.
*/
external_componentFontSize: 14,
/**
* This sets the font family of External Component shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
external_componentFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of External Component shape for the diagram
*
* **Notes:** Default value: normal.
*/
external_componentFontWeight: 'normal',
/**
* This sets the font size of Component DB shape for the diagram
*
* **Notes:** Default value: 14.
*/
component_dbFontSize: 14,
/**
* This sets the font family of Component DB shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
component_dbFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of Component DB shape for the diagram
*
* **Notes:** Default value: normal.
*/
component_dbFontWeight: 'normal',
/**
* This sets the font size of External Component DB shape for the diagram
*
* **Notes:** Default value: 14.
*/
external_component_dbFontSize: 14,
/**
* This sets the font family of External Component DB shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
external_component_dbFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of External Component DB shape for the diagram
*
* **Notes:** Default value: normal.
*/
external_component_dbFontWeight: 'normal',
/**
* This sets the font size of Component Queue shape for the diagram
*
* **Notes:** Default value: 14.
*/
component_queueFontSize: 14,
/**
* This sets the font family of Component Queue shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
component_queueFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of Component Queue shape for the diagram
*
* **Notes:** Default value: normal.
*/
component_queueFontWeight: 'normal',
/**
* This sets the font size of External Component Queue shape for the diagram
*
* **Notes:** Default value: 14.
*/
external_component_queueFontSize: 14,
/**
* This sets the font family of External Component Queue shape for the diagram
*
* **Notes:** Default value: "Open Sans", sans-serif.
*/
external_component_queueFontFamily: '"Open Sans", sans-serif',
/**
* This sets the font weight of External Component Queue shape for the diagram
*
* **Notes:** Default value: normal.
*/
external_component_queueFontWeight: 'normal',
/**

401
src/diagrams/c4/c4Db.js
View File

@@ -22,6 +22,8 @@ let rels = [];
let title = '';
let wrapEnabled = false;
let description = '';
let c4ShapeInRow = 4;
let c4BoundaryInRow = 2;
var c4Type;
export const getC4Type = function () {
@@ -65,22 +67,46 @@ export const addRel = function (type, from, to, label, techn, descr, sprite, tag
rel.to = to;
rel.label = { text: label };
if (descr === undefined || descr === null) {
rel.descr = { text: '' };
} else {
rel.descr = { text: descr };
}
if (techn === undefined || techn === null) {
rel.techn = { text: '' };
} else {
rel.techn = { text: techn };
if (typeof techn === 'object') {
let [key, value] = Object.entries(techn)[0];
rel[key] = { text: value };
} else {
rel.techn = { text: techn };
}
}
// rel.techn = techn;
rel.sprite = sprite;
rel.tags = tags;
rel.link = link;
if (descr === undefined || descr === null) {
rel.descr = { text: '' };
} else {
if (typeof descr === 'object') {
let [key, value] = Object.entries(descr)[0];
rel[key] = { text: value };
} else {
rel.descr = { text: descr };
}
}
if (typeof sprite === 'object') {
let [key, value] = Object.entries(sprite)[0];
rel[key] = value;
} else {
rel.sprite = sprite;
}
if (typeof tags === 'object') {
let [key, value] = Object.entries(tags)[0];
rel[key] = value;
} else {
rel.tags = tags;
}
if (typeof link === 'object') {
let [key, value] = Object.entries(link)[0];
rel[key] = value;
} else {
rel.link = link;
}
rel.wrap = autoWrap();
};
@@ -108,15 +134,35 @@ export const addPersonOrSystem = function (typeC4Shape, alias, label, descr, spr
if (descr === undefined || descr === null) {
personOrSystem.descr = { text: '' };
} else {
personOrSystem.descr = { text: descr };
if (typeof descr === 'object') {
let [key, value] = Object.entries(descr)[0];
personOrSystem[key] = { text: value };
} else {
personOrSystem.descr = { text: descr };
}
}
personOrSystem.wrap = autoWrap();
personOrSystem.sprite = sprite;
personOrSystem.tags = tags;
personOrSystem.link = link;
if (typeof sprite === 'object') {
let [key, value] = Object.entries(sprite)[0];
personOrSystem[key] = value;
} else {
personOrSystem.sprite = sprite;
}
if (typeof tags === 'object') {
let [key, value] = Object.entries(tags)[0];
personOrSystem[key] = value;
} else {
personOrSystem.tags = tags;
}
if (typeof link === 'object') {
let [key, value] = Object.entries(link)[0];
personOrSystem[key] = value;
} else {
personOrSystem.link = link;
}
personOrSystem.typeC4Shape = { text: typeC4Shape };
personOrSystem.parentBoundary = currentBoundaryParse;
personOrSystem.wrap = autoWrap();
};
//type, alias, label, ?techn, ?descr ?sprite, ?tags, $link
@@ -143,18 +189,43 @@ export const addContainer = function (typeC4Shape, alias, label, techn, descr, s
if (techn === undefined || techn === null) {
container.techn = { text: '' };
} else {
container.techn = { text: techn };
if (typeof techn === 'object') {
let [key, value] = Object.entries(techn)[0];
container[key] = { text: value };
} else {
container.techn = { text: techn };
}
}
if (descr === undefined || descr === null) {
container.descr = { text: '' };
} else {
container.descr = { text: descr };
if (typeof descr === 'object') {
let [key, value] = Object.entries(descr)[0];
container[key] = { text: value };
} else {
container.descr = { text: descr };
}
}
container.sprite = sprite;
container.tags = tags;
container.link = link;
if (typeof sprite === 'object') {
let [key, value] = Object.entries(sprite)[0];
container[key] = value;
} else {
container.sprite = sprite;
}
if (typeof tags === 'object') {
let [key, value] = Object.entries(tags)[0];
container[key] = value;
} else {
container.tags = tags;
}
if (typeof link === 'object') {
let [key, value] = Object.entries(link)[0];
container[key] = value;
} else {
container.link = link;
}
container.wrap = autoWrap();
container.typeC4Shape = { text: typeC4Shape };
container.parentBoundary = currentBoundaryParse;
@@ -184,18 +255,43 @@ export const addComponent = function (typeC4Shape, alias, label, techn, descr, s
if (techn === undefined || techn === null) {
component.techn = { text: '' };
} else {
component.techn = { text: techn };
if (typeof techn === 'object') {
let [key, value] = Object.entries(techn)[0];
component[key] = { text: value };
} else {
component.techn = { text: techn };
}
}
if (descr === undefined || descr === null) {
component.descr = { text: '' };
} else {
component.descr = { text: descr };
if (typeof descr === 'object') {
let [key, value] = Object.entries(descr)[0];
component[key] = { text: value };
} else {
component.descr = { text: descr };
}
}
component.sprite = sprite;
component.tags = tags;
component.link = link;
if (typeof sprite === 'object') {
let [key, value] = Object.entries(sprite)[0];
component[key] = value;
} else {
component.sprite = sprite;
}
if (typeof tags === 'object') {
let [key, value] = Object.entries(tags)[0];
component[key] = value;
} else {
component.tags = tags;
}
if (typeof link === 'object') {
let [key, value] = Object.entries(link)[0];
component[key] = value;
} else {
component.link = link;
}
component.wrap = autoWrap();
component.typeC4Shape = { text: typeC4Shape };
component.parentBoundary = currentBoundaryParse;
@@ -227,11 +323,26 @@ export const addPersonOrSystemBoundary = function (alias, label, type, tags, lin
if (type === undefined || type === null) {
boundary.type = { text: 'system' };
} else {
boundary.type = { text: type };
if (typeof type === 'object') {
let [key, value] = Object.entries(type)[0];
boundary[key] = { text: value };
} else {
boundary.type = { text: type };
}
}
boundary.tags = tags;
boundary.link = link;
if (typeof tags === 'object') {
let [key, value] = Object.entries(tags)[0];
boundary[key] = value;
} else {
boundary.tags = tags;
}
if (typeof link === 'object') {
let [key, value] = Object.entries(link)[0];
boundary[key] = value;
} else {
boundary.link = link;
}
boundary.parentBoundary = currentBoundaryParse;
boundary.wrap = autoWrap();
@@ -266,11 +377,26 @@ export const addContainerBoundary = function (alias, label, type, tags, link) {
if (type === undefined || type === null) {
boundary.type = { text: 'container' };
} else {
boundary.type = { text: type };
if (typeof type === 'object') {
let [key, value] = Object.entries(type)[0];
boundary[key] = { text: value };
} else {
boundary.type = { text: type };
}
}
boundary.tags = tags;
boundary.link = link;
if (typeof tags === 'object') {
let [key, value] = Object.entries(tags)[0];
boundary[key] = value;
} else {
boundary.tags = tags;
}
if (typeof link === 'object') {
let [key, value] = Object.entries(link)[0];
boundary[key] = value;
} else {
boundary.link = link;
}
boundary.parentBoundary = currentBoundaryParse;
boundary.wrap = autoWrap();
@@ -314,17 +440,37 @@ export const addDeploymentNode = function (
if (type === undefined || type === null) {
boundary.type = { text: 'node' };
} else {
boundary.type = { text: type };
if (typeof type === 'object') {
let [key, value] = Object.entries(type)[0];
boundary[key] = { text: value };
} else {
boundary.type = { text: type };
}
}
if (descr === undefined || descr === null) {
boundary.descr = { text: '' };
} else {
boundary.descr = { text: type };
if (typeof descr === 'object') {
let [key, value] = Object.entries(descr)[0];
boundary[key] = { text: value };
} else {
boundary.descr = { text: descr };
}
}
boundary.tags = tags;
boundary.link = link;
if (typeof tags === 'object') {
let [key, value] = Object.entries(tags)[0];
boundary[key] = value;
} else {
boundary.tags = tags;
}
if (typeof link === 'object') {
let [key, value] = Object.entries(link)[0];
boundary[key] = value;
} else {
boundary.link = link;
}
boundary.nodeType = nodeType;
boundary.parentBoundary = currentBoundaryParse;
boundary.wrap = autoWrap();
@@ -341,6 +487,177 @@ export const popBoundaryParseStack = function () {
boundaryParseStack.push(parentBoundaryParse);
};
//elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite
export const updateElStyle = function (
typeC4Shape,
elementName,
bgColor,
fontColor,
borderColor,
shadowing,
shape,
sprite,
techn,
legendText,
legendSprite
) {
let old = c4ShapeArray.find((element) => element.alias === elementName);
if (old === undefined) {
old = boundarys.find((element) => element.alias === elementName);
if (old === undefined) {
return;
}
}
if (bgColor !== undefined && bgColor !== null) {
if (typeof bgColor === 'object') {
let [key, value] = Object.entries(bgColor)[0];
old[key] = value;
} else {
old.bgColor = bgColor;
}
}
if (fontColor !== undefined && fontColor !== null) {
if (typeof fontColor === 'object') {
let [key, value] = Object.entries(fontColor)[0];
old[key] = value;
} else {
old.fontColor = fontColor;
}
}
if (borderColor !== undefined && borderColor !== null) {
if (typeof borderColor === 'object') {
let [key, value] = Object.entries(borderColor)[0];
old[key] = value;
} else {
old.borderColor = borderColor;
}
}
if (shadowing !== undefined && shadowing !== null) {
if (typeof shadowing === 'object') {
let [key, value] = Object.entries(shadowing)[0];
old[key] = value;
} else {
old.shadowing = shadowing;
}
}
if (shape !== undefined && shape !== null) {
if (typeof shape === 'object') {
let [key, value] = Object.entries(shape)[0];
old[key] = value;
} else {
old.shape = shape;
}
}
if (sprite !== undefined && sprite !== null) {
if (typeof sprite === 'object') {
let [key, value] = Object.entries(sprite)[0];
old[key] = value;
} else {
old.sprite = sprite;
}
}
if (techn !== undefined && techn !== null) {
if (typeof techn === 'object') {
let [key, value] = Object.entries(techn)[0];
old[key] = value;
} else {
old.techn = techn;
}
}
if (legendText !== undefined && legendText !== null) {
if (typeof legendText === 'object') {
let [key, value] = Object.entries(legendText)[0];
old[key] = value;
} else {
old.legendText = legendText;
}
}
if (legendSprite !== undefined && legendSprite !== null) {
if (typeof legendSprite === 'object') {
let [key, value] = Object.entries(legendSprite)[0];
old[key] = value;
} else {
old.legendSprite = legendSprite;
}
}
};
//textColor, lineColor, ?offsetX, ?offsetY
export const updateRelStyle = function (
typeC4Shape,
from,
to,
textColor,
lineColor,
offsetX,
offsetY
) {
const old = rels.find((rel) => rel.from === from && rel.to === to);
if (old === undefined) {
return;
}
if (textColor !== undefined && textColor !== null) {
if (typeof textColor === 'object') {
let [key, value] = Object.entries(textColor)[0];
old[key] = value;
} else {
old.textColor = textColor;
}
}
if (lineColor !== undefined && lineColor !== null) {
if (typeof lineColor === 'object') {
let [key, value] = Object.entries(lineColor)[0];
old[key] = value;
} else {
old.lineColor = lineColor;
}
}
if (offsetX !== undefined && offsetX !== null) {
if (typeof offsetX === 'object') {
let [key, value] = Object.entries(offsetX)[0];
old[key] = parseInt(value);
} else {
old.offsetX = parseInt(offsetX);
}
}
if (offsetY !== undefined && offsetY !== null) {
if (typeof offsetY === 'object') {
let [key, value] = Object.entries(offsetY)[0];
old[key] = parseInt(value);
} else {
old.offsetY = parseInt(offsetY);
}
}
};
//?c4ShapeInRow, ?c4BoundaryInRow
export const updateLayoutConfig = function (typeC4Shape, c4ShapeInRowParam, c4BoundaryInRowParam) {
let c4ShapeInRowValue = c4ShapeInRow;
let c4BoundaryInRowValue = c4BoundaryInRow;
if (typeof c4ShapeInRowParam === 'object') {
let [key, value] = Object.entries(c4ShapeInRowParam)[0];
c4ShapeInRowValue = parseInt(value);
} else {
c4ShapeInRowValue = parseInt(c4ShapeInRowParam);
}
if (typeof c4BoundaryInRowParam === 'object') {
let [key, value] = Object.entries(c4BoundaryInRowParam)[0];
c4BoundaryInRowValue = parseInt(value);
} else {
c4BoundaryInRowValue = parseInt(c4BoundaryInRowParam);
}
if (c4ShapeInRowValue >= 1) c4ShapeInRow = c4ShapeInRowValue;
if (c4BoundaryInRowValue >= 1) c4BoundaryInRow = c4BoundaryInRowValue;
};
export const getC4ShapeInRow = function () {
return c4ShapeInRow;
};
export const getC4BoundaryInRow = function () {
return c4BoundaryInRow;
};
export const getCurrentBoundaryParse = function () {
return currentBoundaryParse;
};
@@ -400,6 +717,13 @@ export const clear = function () {
currentBoundaryParse = 'global';
boundaryParseStack = [''];
rels = [];
boundaryParseStack = [''];
title = '';
wrapEnabled = false;
description = '';
c4ShapeInRow = 4;
c4BoundaryInRow = 2;
};
export const LINETYPE = {
@@ -453,6 +777,9 @@ export default {
addDeploymentNode,
popBoundaryParseStack,
addRel,
updateElStyle,
updateRelStyle,
updateLayoutConfig,
autoWrap,
setWrap,
getC4ShapeArray,
@@ -464,6 +791,8 @@ export default {
getRels,
getTitle,
getC4Type,
getC4ShapeInRow,
getC4BoundaryInRow,
setAccTitle,
getAccTitle,
getAccDescription,

15
src/diagrams/c4/c4Renderer.js
View File

@@ -17,6 +17,9 @@ import addSVGAccessibilityFields from '../../accessibility';
let globalBoundaryMaxX = 0,
globalBoundaryMaxY = 0;
let c4ShapeInRow = 4;
let c4BoundaryInRow = 2;
parser.yy = c4Db;
let conf = {};
@@ -68,7 +71,7 @@ class Bounds {
if (
_startx >= this.data.widthLimit ||
_stopx >= this.data.widthLimit ||
this.nextData.cnt > conf.c4ShapeInRow
this.nextData.cnt > c4ShapeInRow
) {
_startx = this.nextData.startx + c4Shape.margin + conf.nextLinePaddingX;
_starty = this.nextData.stopy + c4Shape.margin * 2;
@@ -448,7 +451,7 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
let currentBounds = new Bounds();
// Calculate the width limit of the boundar. label/type 的长度，
currentBounds.data.widthLimit =
parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length);
parentBounds.data.widthLimit / Math.min(c4BoundaryInRow, currentBoundarys.length);
// Math.min(
// conf.width * conf.c4ShapeInRow + conf.c4ShapeMargin * conf.c4ShapeInRow * 2,
// parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length)
@@ -507,7 +510,7 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
Y = currentBoundary['descr'].Y + currentBoundary['descr'].height;
}
if (i == 0 || i % conf.c4BoundaryInRow === 0) {
if (i == 0 || i % c4BoundaryInRow === 0) {
// Calculate the drawing start point of the currentBoundarys.
let _x = parentBounds.data.startx + conf.diagramMarginX;
let _y = parentBounds.data.stopy + conf.diagramMarginY + Y;
@@ -579,10 +582,15 @@ export const draw = function (text, id) {
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
let db = parser.yy;
parser.yy.clear();
parser.yy.setWrap(conf.wrap);
parser.parse(text + '\n');
c4ShapeInRow = db.getC4ShapeInRow();
c4BoundaryInRow = db.getC4BoundaryInRow();
log.debug(`C:${JSON.stringify(conf, null, 2)}`);
const diagram =
@@ -593,6 +601,7 @@ export const draw = function (text, id) {
svgDraw.insertClockIcon(diagram);
let screenBounds = new Bounds();
screenBounds.setData(
conf.diagramMarginX,
conf.diagramMarginX,

54
src/diagrams/c4/parser/c4Diagram.jison
View File

@@ -61,14 +61,27 @@
%x rel_r
%x rel_b
/* Custom tags/stereotypes */
%x update_el_style
%x update_rel_style
%x update_layout_config
%x attribute
%x string
%x string_kv
%x string_kv_key
%x string_kv_value
%x open_directive
%x type_directive
%x arg_directive
%x close_directive
%x acc_title
%x acc_descr
%x acc_descr_multiline
%%
\%\%\{ { this.begin('open_directive'); return 'open_directive'; }
.*direction\s+TB[^\n]* return 'direction_tb';
.*direction\s+BT[^\n]* return 'direction_bt';
@@ -78,11 +91,21 @@
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; }
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
\%\%(?!\{)*[^\n]*(\r?\n?)+ /* skip comments */
\%\%[^\n]*(\r?\n)* c /* skip comments */
"title"\s[^#\n;]+ return 'title';
"accDescription"\s[^#\n;]+ return 'accDescription';
accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; }
<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; }
accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; }
<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; }
accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
<acc_descr_multiline>[\}] { this.popState(); }
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
\%\%(?!\{)*[^\n]*(\r?\n?)+ /* skip comments */
\%\%[^\n]*(\r?\n)* c /* skip comments */
\s*(\r?\n)+ return 'NEWLINE';
\s+ /* skip whitespace */
@@ -140,10 +163,14 @@
"Rel_Back" { this.begin("rel_b"); console.log('begin rel_b'); return 'REL_B';}
"RelIndex" { this.begin("rel_index"); console.log('begin rel_index'); return 'REL_INDEX';}
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index><<EOF>> return "EOF_IN_STRUCT";
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index>[(][ ]*[,] { console.log('begin attribute with ATTRIBUTE_EMPTY'); this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index>[(] { console.log('begin attribute'); this.begin("attribute"); }
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,attribute>[)] { console.log('STOP attribute'); this.popState();console.log('STOP diagram'); this.popState();}
"UpdateElementStyle" { this.begin("update_el_style"); console.log('begin update_el_style'); return 'UPDATE_EL_STYLE';}
"UpdateRelStyle" { this.begin("update_rel_style"); console.log('begin update_rel_style'); return 'UPDATE_REL_STYLE';}
"UpdateLayoutConfig" { this.begin("update_layout_config"); console.log('begin update_layout_config'); return 'UPDATE_LAYOUT_CONFIG';}
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>> return "EOF_IN_STRUCT";
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,] { console.log('begin attribute with ATTRIBUTE_EMPTY'); this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(] { console.log('begin attribute'); this.begin("attribute"); }
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)] { console.log('STOP attribute'); this.popState();console.log('STOP diagram'); this.popState();}
<attribute>",," { console.log(',,'); return 'ATTRIBUTE_EMPTY';}
<attribute>"," { console.log(','); }
@@ -151,6 +178,13 @@
<attribute>[ ]*["] { console.log('begin string'); this.begin("string");}
<string>["] { console.log('STOP string'); this.popState(); }
<string>[^"]* { console.log('STR'); return "STR";}
<attribute>[ ]*[\$] { console.log('begin string_kv'); this.begin("string_kv");}
<string_kv>[^=]* { console.log('STR_KEY'); this.begin("string_kv_key"); return "STR_KEY";}
<string_kv_key>[=][ ]*["] { console.log('begin string_kv_value'); this.popState(); this.begin("string_kv_value"); }
<string_kv_value>[^"]+ { console.log('STR_VALUE'); return "STR_VALUE";}
<string_kv_value>["] { console.log('STOP string_kv_value'); this.popState(); this.popState(); }
<attribute>[^,]+ { console.log('not STR'); return "STR";}
'{' { /* this.begin("lbrace"); */ console.log('begin boundary block'); return "LBRACE";}
@@ -235,6 +269,9 @@ otherStatements
otherStatement
: title {yy.setTitle($1.substring(6));$$=$1.substring(6);}
| accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}
| acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); }
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
;
boundaryStatement
@@ -297,6 +334,9 @@ diagramStatement
| REL_R attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_r', ...$2); $$=$2;}
| REL_B attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_b', ...$2); $$=$2;}
| REL_INDEX attributes {console.log($1,JSON.stringify($2)); $2.splice(0, 1); yy.addRel('rel', ...$2); $$=$2;}
| UPDATE_EL_STYLE attributes {console.log($1,JSON.stringify($2)); yy.updateElStyle('update_el_style', ...$2); $$=$2;}
| UPDATE_REL_STYLE attributes {console.log($1,JSON.stringify($2)); yy.updateRelStyle('update_rel_style', ...$2); $$=$2;}
| UPDATE_LAYOUT_CONFIG attributes {console.log($1,JSON.stringify($2)); yy.updateLayoutConfig('update_layout_config', ...$2); $$=$2;}
;
attributes
@@ -306,7 +346,7 @@ attributes
attribute
: STR { $$ = $1.trim(); }
| STR_KEY STR_VALUE { console.log('kv: ', $1, $2); let kv={}; kv[$1.trim()]=$2.trim(); $$=kv; }
| ATTRIBUTE { $$ = $1.trim(); }
| ATTRIBUTE_EMPTY { $$ = ""; }
;

59
src/diagrams/c4/svgDraw.js
View File

@@ -216,6 +216,11 @@ export const drawRels = (elem, rels, conf) => {
const relsElem = elem.append('g');
let i = 0;
for (let rel of rels) {
let textColor = rel.textColor ? rel.textColor : '#444444';
let strokeColor = rel.lineColor ? rel.lineColor : '#444444';
let offsetX = rel.offsetX ? parseInt(rel.offsetX) : 0;
let offsetY = rel.offsetY ? parseInt(rel.offsetY) : 0;
let url = '';
if (i === 0) {
let line = relsElem.append('line');
@@ -225,7 +230,7 @@ export const drawRels = (elem, rels, conf) => {
line.attr('y2', rel.endPoint.y);
line.attr('stroke-width', '1');
line.attr('stroke', '#444444');
line.attr('stroke', strokeColor);
line.style('fill', 'none');
if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)');
if (rel.type === 'birel' || rel.type === 'rel_b')
@@ -236,7 +241,7 @@ export const drawRels = (elem, rels, conf) => {
line
.attr('fill', 'none')
.attr('stroke-width', '1')
.attr('stroke', '#444444')
.attr('stroke', strokeColor)
.attr(
'd',
'Mstartx,starty Qcontrolx,controly stopx,stopy '
@@ -261,11 +266,15 @@ export const drawRels = (elem, rels, conf) => {
_drawTextCandidateFunc(conf)(
rel.label.text,
relsElem,
Math.min(rel.startPoint.x, rel.endPoint.x) + Math.abs(rel.endPoint.x - rel.startPoint.x) / 2,
Math.min(rel.startPoint.y, rel.endPoint.y) + Math.abs(rel.endPoint.y - rel.startPoint.y) / 2,
Math.min(rel.startPoint.x, rel.endPoint.x) +
Math.abs(rel.endPoint.x - rel.startPoint.x) / 2 +
offsetX,
Math.min(rel.startPoint.y, rel.endPoint.y) +
Math.abs(rel.endPoint.y - rel.startPoint.y) / 2 +
offsetY,
rel.label.width,
rel.label.height,
{ fill: '#444444' },
{ fill: textColor },
messageConf
);
@@ -275,14 +284,16 @@ export const drawRels = (elem, rels, conf) => {
'[' + rel.techn.text + ']',
relsElem,
Math.min(rel.startPoint.x, rel.endPoint.x) +
Math.abs(rel.endPoint.x - rel.startPoint.x) / 2,
Math.abs(rel.endPoint.x - rel.startPoint.x) / 2 +
offsetX,
Math.min(rel.startPoint.y, rel.endPoint.y) +
Math.abs(rel.endPoint.y - rel.startPoint.y) / 2 +
conf.messageFontSize +
5,
5 +
offsetY,
Math.max(rel.label.width, rel.techn.width),
rel.techn.height,
{ fill: '#444444', 'font-style': 'italic' },
{ fill: textColor, 'font-style': 'italic' },
messageConf
);
}
@@ -299,13 +310,17 @@ export const drawRels = (elem, rels, conf) => {
const drawBoundary = function (elem, boundary, conf) {
const boundaryElem = elem.append('g');
let fillColor = boundary.bgColor ? boundary.bgColor : 'none';
let strokeColor = boundary.borderColor ? boundary.borderColor : '#444444';
let fontColor = boundary.fontColor ? boundary.fontColor : 'black';
let attrsValue = { 'stroke-width': 1.0, 'stroke-dasharray': '7.0,7.0' };
if (boundary.nodeType) attrsValue = { 'stroke-width': 1.0 };
let rectData = {
x: boundary.x,
y: boundary.y,
fill: 'none',
stroke: '#444444',
fill: fillColor,
stroke: strokeColor,
width: boundary.width,
height: boundary.height,
rx: 2.5,
@@ -319,6 +334,7 @@ const drawBoundary = function (elem, boundary, conf) {
let boundaryConf = conf.boundaryFont();
boundaryConf.fontWeight = 'bold';
boundaryConf.fontSize = boundaryConf.fontSize + 2;
boundaryConf.fontColor = fontColor;
_drawTextCandidateFunc(conf)(
boundary.label.text,
boundaryElem,
@@ -333,6 +349,7 @@ const drawBoundary = function (elem, boundary, conf) {
// draw type
if (boundary.type && boundary.type.text !== '') {
boundaryConf = conf.boundaryFont();
boundaryConf.fontColor = fontColor;
_drawTextCandidateFunc(conf)(
boundary.type.text,
boundaryElem,
@@ -349,6 +366,7 @@ const drawBoundary = function (elem, boundary, conf) {
if (boundary.descr && boundary.descr.text !== '') {
boundaryConf = conf.boundaryFont();
boundaryConf.fontSize = boundaryConf.fontSize - 2;
boundaryConf.fontColor = fontColor;
_drawTextCandidateFunc(conf)(
boundary.descr.text,
boundaryElem,
@@ -363,8 +381,12 @@ const drawBoundary = function (elem, boundary, conf) {
};
export const drawC4Shape = function (elem, c4Shape, conf) {
let fillColor = conf[c4Shape.typeC4Shape.text + '_bg_color'];
let strokeColor = conf[c4Shape.typeC4Shape.text + '_border_color'];
let fillColor = c4Shape.bgColor ? c4Shape.bgColor : conf[c4Shape.typeC4Shape.text + '_bg_color'];
let strokeColor = c4Shape.borderColor
? c4Shape.borderColor
: conf[c4Shape.typeC4Shape.text + '_border_color'];
let fontColor = c4Shape.fontColor ? c4Shape.fontColor : '#FFFFFF';
let personImg =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACD0lEQVR4Xu2YoU4EMRCGT+4j8Ai8AhaH4QHgAUjQuFMECUgMIUgwJAgMhgQsAYUiJCiQIBBY+EITsjfTdme6V24v4c8vyGbb+ZjOtN0bNcvjQXmkH83WvYBWto6PLm6v7p7uH1/w2fXD+PBycX1Pv2l3IdDm/vn7x+dXQiAubRzoURa7gRZWd0iGRIiJbOnhnfYBQZNJjNbuyY2eJG8fkDE3bbG4ep6MHUAsgYxmE3nVs6VsBWJSGccsOlFPmLIViMzLOB7pCVO2AtHJMohH7Fh6zqitQK7m0rJvAVYgGcEpe//PLdDz65sM4pF9N7ICcXDKIB5Nv6j7tD0NoSdM2QrU9Gg0ewE1LqBhHR3BBdvj2vapnidjHxD/q6vd7Pvhr31AwcY8eXMTXAKECZZJFXuEq27aLgQK5uLMohCenGGuGewOxSjBvYBqeG6B+Nqiblggdjnc+ZXDy+FNFpFzw76O3UBAROuXh6FoiAcf5g9eTvUgzy0nWg6I8cXHRUpg5bOVBCo+KDpFajOf23GgPme7RSQ+lacIENUgJ6gg1k6HjgOlqnLqip4tEuhv0hNEMXUD0clyXE3p6pZA0S2nnvTlXwLJEZWlb7cTQH1+USgTN4VhAenm/wea1OCAOmqo6fE1WCb9WSKBah+rbUWPWAmE2Rvk0ApiB45eOyNAzU8xcTvj8KvkKEoOaIYeHNA3ZuygAvFMUO0AAAAASUVORK5CYII=';
switch (c4Shape.typeC4Shape.text) {
@@ -473,7 +495,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
let c4ShapeFontConf = getC4ShapeFont(conf, c4Shape.typeC4Shape.text);
c4ShapeElem
.append('text')
.attr('fill', '#FFFFFF')
.attr('fill', fontColor)
.attr('font-family', c4ShapeFontConf.fontFamily)
.attr('font-size', c4ShapeFontConf.fontSize - 2)
.attr('font-style', 'italic')
@@ -502,6 +524,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
let textFontConf = conf[c4Shape.typeC4Shape.text + 'Font']();
textFontConf.fontWeight = 'bold';
textFontConf.fontSize = textFontConf.fontSize + 2;
textFontConf.fontColor = fontColor;
_drawTextCandidateFunc(conf)(
c4Shape.label.text,
c4ShapeElem,
@@ -509,12 +532,13 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
c4Shape.y + c4Shape.label.Y,
c4Shape.width,
c4Shape.height,
{ fill: '#FFFFFF' },
{ fill: fontColor },
textFontConf
);
// draw techn/type
textFontConf = conf[c4Shape.typeC4Shape.text + 'Font']();
textFontConf.fontColor = fontColor;
if (c4Shape.thchn && c4Shape.thchn.text !== '') {
_drawTextCandidateFunc(conf)(
@@ -524,7 +548,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
c4Shape.y + c4Shape.thchn.Y,
c4Shape.width,
c4Shape.height,
{ fill: '#FFFFFF', 'font-style': 'italic' },
{ fill: fontColor, 'font-style': 'italic' },
textFontConf
);
} else if (c4Shape.type && c4Shape.type.text !== '') {
@@ -535,7 +559,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
c4Shape.y + c4Shape.type.Y,
c4Shape.width,
c4Shape.height,
{ fill: '#FFFFFF', 'font-style': 'italic' },
{ fill: fontColor, 'font-style': 'italic' },
textFontConf
);
}
@@ -543,6 +567,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
// draw descr
if (c4Shape.descr && c4Shape.descr.text !== '') {
textFontConf = conf.personFont();
textFontConf.fontColor = fontColor;
_drawTextCandidateFunc(conf)(
c4Shape.descr.text,
c4ShapeElem,
@@ -550,7 +575,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
c4Shape.y + c4Shape.descr.Y,
c4Shape.width,
c4Shape.height,
{ fill: '#FFFFFF' },
{ fill: fontColor },
textFontConf
);
}