import DOMPurify from "dompurify"; import dayjs from "dayjs"; import { adjust, invert, darken, lighten, rgba } from "khroma"; const LEVELS = { trace: 0, debug: 1, info: 2, warn: 3, error: 4, fatal: 5 }; const log = { trace: (..._args) => { }, debug: (..._args) => { }, info: (..._args) => { }, warn: (..._args) => { }, error: (..._args) => { }, fatal: (..._args) => { } }; const setLogLevel = function(level = "fatal") { let numericLevel = LEVELS.fatal; if (typeof level === "string") { level = level.toLowerCase(); if (level in LEVELS) { numericLevel = LEVELS[level]; } } else if (typeof level === "number") { numericLevel = level; } log.trace = () => { }; log.debug = () => { }; log.info = () => { }; log.warn = () => { }; log.error = () => { }; log.fatal = () => { }; if (numericLevel <= LEVELS.fatal) { log.fatal = console.error ? console.error.bind(console, format("FATAL"), "color: orange") : console.log.bind(console, "\x1B[35m", format("FATAL")); } if (numericLevel <= LEVELS.error) { log.error = console.error ? console.error.bind(console, format("ERROR"), "color: orange") : console.log.bind(console, "\x1B[31m", format("ERROR")); } if (numericLevel <= LEVELS.warn) { log.warn = console.warn ? console.warn.bind(console, format("WARN"), "color: orange") : console.log.bind(console, `\x1B[33m`, format("WARN")); } if (numericLevel <= LEVELS.info) { log.info = console.info ? console.info.bind(console, format("INFO"), "color: lightblue") : console.log.bind(console, "\x1B[34m", format("INFO")); } if (numericLevel <= LEVELS.debug) { log.debug = console.debug ? console.debug.bind(console, format("DEBUG"), "color: lightgreen") : console.log.bind(console, "\x1B[32m", format("DEBUG")); } if (numericLevel <= LEVELS.trace) { log.trace = console.debug ? console.debug.bind(console, format("TRACE"), "color: lightgreen") : console.log.bind(console, "\x1B[32m", format("TRACE")); } }; const format = (level) => { const time = dayjs().format("ss.SSS"); return `%c${time} : ${level} : `; }; const getRows = (s) => { if (!s) { return [""]; } const str = breakToPlaceholder(s).replace(/\\n/g, "#br#"); return str.split("#br#"); }; const removeScript = (txt) => { return DOMPurify.sanitize(txt); }; const sanitizeMore = (text, config2) => { var _a; if (((_a = config2.flowchart) == null ? void 0 : _a.htmlLabels) !== false) { const level = config2.securityLevel; if (level === "antiscript" || level === "strict") { text = removeScript(text); } else if (level !== "loose") { text = breakToPlaceholder(text); text = text.replace(//g, ">"); text = text.replace(/=/g, "="); text = placeholderToBreak(text); } } return text; }; const sanitizeText$1 = (text, config2) => { if (!text) { return text; } if (config2.dompurifyConfig) { text = DOMPurify.sanitize(sanitizeMore(text, config2), config2.dompurifyConfig).toString(); } else { text = DOMPurify.sanitize(sanitizeMore(text, config2), { FORBID_TAGS: ["style"] }).toString(); } return text; }; const sanitizeTextOrArray = (a, config2) => { if (typeof a === "string") { return sanitizeText$1(a, config2); } return a.flat().map((x) => sanitizeText$1(x, config2)); }; const lineBreakRegex = //gi; const hasBreaks = (text) => { return lineBreakRegex.test(text); }; const splitBreaks = (text) => { return text.split(lineBreakRegex); }; const placeholderToBreak = (s) => { return s.replace(/#br#/g, "
"); }; const breakToPlaceholder = (s) => { return s.replace(lineBreakRegex, "#br#"); }; const getUrl = (useAbsolute) => { let url = ""; if (useAbsolute) { url = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search; url = url.replaceAll(/\(/g, "\\("); url = url.replaceAll(/\)/g, "\\)"); } return url; }; const evaluate = (val) => val === false || ["false", "null", "0"].includes(String(val).trim().toLowerCase()) ? false : true; const parseGenericTypes = function(text) { let cleanedText = text; if (text.split("~").length - 1 >= 2) { let newCleanedText = cleanedText; do { cleanedText = newCleanedText; newCleanedText = cleanedText.replace(/~([^\s,:;]+)~/, "<$1>"); } while (newCleanedText != cleanedText); return parseGenericTypes(newCleanedText); } else { return cleanedText; } }; const common = { getRows, sanitizeText: sanitizeText$1, sanitizeTextOrArray, hasBreaks, splitBreaks, lineBreakRegex, removeScript, getUrl, evaluate }; const mkBorder = (col, darkMode) => darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 }); const oldAttributeBackgroundColorOdd = "#ffffff"; const oldAttributeBackgroundColorEven = "#f2f2f2"; let Theme$4 = class Theme { constructor() { this.background = "#f4f4f4"; this.primaryColor = "#fff4dd"; this.noteBkgColor = "#fff5ad"; this.noteTextColor = "#333"; this.THEME_COLOR_LIMIT = 12; this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; this.fontSize = "16px"; } updateColors() { this.primaryTextColor = this.primaryTextColor || (this.darkMode ? "#eee" : "#333"); 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.textColor = this.textColor || this.primaryTextColor; 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; this.actorBorder = this.actorBorder || this.primaryBorderColor; this.actorBkg = this.actorBkg || this.mainBkg; this.actorTextColor = this.actorTextColor || this.primaryTextColor; this.actorLineColor = this.actorLineColor || "grey"; 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); 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"; this.personBorder = this.personBorder || this.primaryBorderColor; this.personBkg = this.personBkg || this.mainBkg; this.transitionColor = this.transitionColor || this.lineColor; this.transitionLabelColor = this.transitionLabelColor || this.textColor; 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; 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); } } for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScaleInv" + i] = this["cScaleInv" + i] || invert(this["cScale" + i]); } 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); } } 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) }); } this.classText = this.classText || this.textColor; 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 }); 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"; this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor; 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; 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"; this.attributeBackgroundColorOdd = this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd; this.attributeBackgroundColorEven = this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven; } calculate(overrides) { if (typeof overrides !== "object") { this.updateColors(); return; } const keys = Object.keys(overrides); keys.forEach((k) => { this[k] = overrides[k]; }); this.updateColors(); keys.forEach((k) => { this[k] = overrides[k]; }); } }; const getThemeVariables$4 = (userOverrides) => { const theme2 = new Theme$4(); theme2.calculate(userOverrides); return theme2; }; let Theme$3 = class Theme2 { constructor() { this.background = "#333"; this.primaryColor = "#1f2020"; this.secondaryColor = lighten(this.primaryColor, 16); this.tertiaryColor = adjust(this.primaryColor, { h: -160 }); this.primaryBorderColor = invert(this.background); this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode); this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode); this.primaryTextColor = invert(this.primaryColor); this.secondaryTextColor = invert(this.secondaryColor); this.tertiaryTextColor = invert(this.tertiaryColor); this.lineColor = invert(this.background); this.textColor = invert(this.background); this.mainBkg = "#1f2020"; this.secondBkg = "calculated"; this.mainContrastColor = "lightgrey"; this.darkTextColor = lighten(invert("#323D47"), 10); this.lineColor = "calculated"; this.border1 = "#81B1DB"; this.border2 = rgba(255, 255, 255, 0.25); this.arrowheadColor = "calculated"; this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; this.fontSize = "16px"; this.labelBackground = "#181818"; this.textColor = "#ccc"; this.THEME_COLOR_LIMIT = 12; this.nodeBkg = "calculated"; this.nodeBorder = "calculated"; this.clusterBkg = "calculated"; this.clusterBorder = "calculated"; this.defaultLinkColor = "calculated"; this.titleColor = "#F9FFFE"; this.edgeLabelBackground = "calculated"; this.actorBorder = "calculated"; this.actorBkg = "calculated"; this.actorTextColor = "calculated"; this.actorLineColor = "calculated"; this.signalColor = "calculated"; this.signalTextColor = "calculated"; this.labelBoxBkgColor = "calculated"; this.labelBoxBorderColor = "calculated"; this.labelTextColor = "calculated"; this.loopTextColor = "calculated"; this.noteBorderColor = "calculated"; this.noteBkgColor = "#fff5ad"; this.noteTextColor = "calculated"; this.activationBorderColor = "calculated"; this.activationBkgColor = "calculated"; this.sequenceNumberColor = "black"; this.sectionBkgColor = darken("#EAE8D9", 30); this.altSectionBkgColor = "calculated"; this.sectionBkgColor2 = "#EAE8D9"; this.taskBorderColor = rgba(255, 255, 255, 70); this.taskBkgColor = "calculated"; this.taskTextColor = "calculated"; this.taskTextLightColor = "calculated"; this.taskTextOutsideColor = "calculated"; this.taskTextClickableColor = "#003163"; this.activeTaskBorderColor = rgba(255, 255, 255, 50); this.activeTaskBkgColor = "#81B1DB"; this.gridColor = "calculated"; this.doneTaskBkgColor = "calculated"; this.doneTaskBorderColor = "grey"; this.critBorderColor = "#E83737"; this.critBkgColor = "#E83737"; this.taskTextDarkColor = "calculated"; this.todayLineColor = "#DB5757"; this.personBorder = "calculated"; this.personBkg = "calculated"; this.labelColor = "calculated"; this.errorBkgColor = "#a44141"; this.errorTextColor = "#ddd"; } updateColors() { this.secondBkg = lighten(this.mainBkg, 16); this.lineColor = this.mainContrastColor; this.arrowheadColor = this.mainContrastColor; this.nodeBkg = this.mainBkg; this.nodeBorder = this.border1; this.clusterBkg = this.secondBkg; this.clusterBorder = this.border2; this.defaultLinkColor = this.lineColor; this.edgeLabelBackground = lighten(this.labelBackground, 25); this.actorBorder = this.border1; this.actorBkg = this.mainBkg; this.actorTextColor = this.mainContrastColor; this.actorLineColor = this.mainContrastColor; this.signalColor = this.mainContrastColor; this.signalTextColor = this.mainContrastColor; this.labelBoxBkgColor = this.actorBkg; this.labelBoxBorderColor = this.actorBorder; this.labelTextColor = this.mainContrastColor; this.loopTextColor = this.mainContrastColor; this.noteBorderColor = this.secondaryBorderColor; this.noteBkgColor = this.secondBkg; this.noteTextColor = this.secondaryTextColor; this.activationBorderColor = this.border1; this.activationBkgColor = this.secondBkg; this.altSectionBkgColor = this.background; this.taskBkgColor = lighten(this.mainBkg, 23); this.taskTextColor = this.darkTextColor; this.taskTextLightColor = this.mainContrastColor; this.taskTextOutsideColor = this.taskTextLightColor; this.gridColor = this.mainContrastColor; this.doneTaskBkgColor = this.mainContrastColor; this.taskTextDarkColor = this.darkTextColor; this.transitionColor = this.transitionColor || this.lineColor; this.transitionLabelColor = this.transitionLabelColor || this.textColor; 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 || "#555"; this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg; this.compositeBorder = this.compositeBorder || this.nodeBorder; this.innerEndBackground = this.primaryBorderColor; this.specialStateColor = "#f4f4f4"; this.errorBkgColor = this.errorBkgColor || this.tertiaryColor; this.errorTextColor = this.errorTextColor || this.tertiaryTextColor; this.fillType0 = this.primaryColor; this.fillType1 = this.secondaryColor; this.fillType2 = adjust(this.primaryColor, { h: 64 }); this.fillType3 = adjust(this.secondaryColor, { h: 64 }); this.fillType4 = adjust(this.primaryColor, { h: -64 }); this.fillType5 = adjust(this.secondaryColor, { h: -64 }); this.fillType6 = adjust(this.primaryColor, { h: 128 }); this.fillType7 = adjust(this.secondaryColor, { h: 128 }); this.cScale1 = this.cScale1 || "#0b0000"; this.cScale2 = this.cScale2 || "#4d1037"; this.cScale3 = this.cScale3 || "#3f5258"; this.cScale4 = this.cScale4 || "#4f2f1b"; this.cScale5 = this.cScale5 || "#6e0a0a"; this.cScale6 = this.cScale6 || "#3b0048"; this.cScale7 = this.cScale7 || "#995a01"; this.cScale8 = this.cScale8 || "#154706"; this.cScale9 = this.cScale9 || "#161722"; this.cScale10 = this.cScale10 || "#00296f"; this.cScale11 = this.cScale11 || "#01629c"; this.cScale12 = this.cScale12 || "#010029"; 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 }); 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 }); for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScaleInv" + i] = this["cScaleInv" + i] || invert(this["cScale" + i]); } for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScalePeer" + i] = this["cScalePeer" + i] || lighten(this["cScale" + i], 10); } for (let i = 0; i < 5; i++) { this["surface" + i] = this["surface" + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(-10 + i * 4) }); this["surfacePeer" + i] = this["surfacePeer" + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(-7 + i * 4) }); } this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? "black" : this.labelTextColor); for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScaleLabel" + i] = this["cScaleLabel" + i] || this.scaleLabelColor; } for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["pie" + i] = this["cScale" + i]; } 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"; this.classText = this.primaryTextColor; this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor; 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; this.git0 = lighten(this.secondaryColor, 20); this.git1 = lighten(this.pie2 || this.secondaryColor, 20); this.git2 = lighten(this.pie3 || this.tertiaryColor, 20); this.git3 = lighten(this.pie4 || adjust(this.primaryColor, { h: -30 }), 20); this.git4 = lighten(this.pie5 || adjust(this.primaryColor, { h: -60 }), 20); this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10); this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: 60 }), 10); this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: 120 }), 20); 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.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"; this.attributeBackgroundColorOdd = this.attributeBackgroundColorOdd || lighten(this.background, 12); this.attributeBackgroundColorEven = this.attributeBackgroundColorEven || lighten(this.background, 2); } calculate(overrides) { if (typeof overrides !== "object") { this.updateColors(); return; } const keys = Object.keys(overrides); keys.forEach((k) => { this[k] = overrides[k]; }); this.updateColors(); keys.forEach((k) => { this[k] = overrides[k]; }); } }; const getThemeVariables$3 = (userOverrides) => { const theme2 = new Theme$3(); theme2.calculate(userOverrides); return theme2; }; let Theme$2 = class Theme3 { constructor() { this.background = "#f4f4f4"; this.primaryColor = "#ECECFF"; this.secondaryColor = adjust(this.primaryColor, { h: 120 }); this.secondaryColor = "#ffffde"; this.tertiaryColor = adjust(this.primaryColor, { h: -160 }); this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode); this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode); this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode); this.primaryTextColor = invert(this.primaryColor); this.secondaryTextColor = invert(this.secondaryColor); this.tertiaryTextColor = invert(this.tertiaryColor); this.lineColor = invert(this.background); this.textColor = invert(this.background); this.background = "white"; this.mainBkg = "#ECECFF"; this.secondBkg = "#ffffde"; this.lineColor = "#333333"; this.border1 = "#9370DB"; this.border2 = "#aaaa33"; this.arrowheadColor = "#333333"; this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; this.fontSize = "16px"; this.labelBackground = "#e8e8e8"; this.textColor = "#333"; this.THEME_COLOR_LIMIT = 12; this.nodeBkg = "calculated"; this.nodeBorder = "calculated"; this.clusterBkg = "calculated"; this.clusterBorder = "calculated"; this.defaultLinkColor = "calculated"; this.titleColor = "calculated"; this.edgeLabelBackground = "calculated"; this.actorBorder = "calculated"; this.actorBkg = "calculated"; this.actorTextColor = "black"; this.actorLineColor = "grey"; this.signalColor = "calculated"; this.signalTextColor = "calculated"; this.labelBoxBkgColor = "calculated"; this.labelBoxBorderColor = "calculated"; this.labelTextColor = "calculated"; this.loopTextColor = "calculated"; this.noteBorderColor = "calculated"; this.noteBkgColor = "#fff5ad"; this.noteTextColor = "calculated"; this.activationBorderColor = "#666"; this.activationBkgColor = "#f4f4f4"; this.sequenceNumberColor = "white"; this.sectionBkgColor = "calculated"; this.altSectionBkgColor = "calculated"; this.sectionBkgColor2 = "calculated"; this.excludeBkgColor = "#eeeeee"; this.taskBorderColor = "calculated"; this.taskBkgColor = "calculated"; this.taskTextLightColor = "calculated"; this.taskTextColor = this.taskTextLightColor; this.taskTextDarkColor = "calculated"; this.taskTextOutsideColor = this.taskTextDarkColor; this.taskTextClickableColor = "calculated"; this.activeTaskBorderColor = "calculated"; this.activeTaskBkgColor = "calculated"; this.gridColor = "calculated"; this.doneTaskBkgColor = "calculated"; this.doneTaskBorderColor = "calculated"; this.critBorderColor = "calculated"; this.critBkgColor = "calculated"; this.todayLineColor = "calculated"; this.sectionBkgColor = rgba(102, 102, 255, 0.49); this.altSectionBkgColor = "white"; this.sectionBkgColor2 = "#fff400"; this.taskBorderColor = "#534fbc"; this.taskBkgColor = "#8a90dd"; this.taskTextLightColor = "white"; this.taskTextColor = "calculated"; this.taskTextDarkColor = "black"; this.taskTextOutsideColor = "calculated"; this.taskTextClickableColor = "#003163"; this.activeTaskBorderColor = "#534fbc"; this.activeTaskBkgColor = "#bfc7ff"; this.gridColor = "lightgrey"; this.doneTaskBkgColor = "lightgrey"; this.doneTaskBorderColor = "grey"; this.critBorderColor = "#ff8888"; this.critBkgColor = "red"; this.todayLineColor = "red"; this.personBorder = "calculated"; this.personBkg = "calculated"; this.labelColor = "black"; this.errorBkgColor = "#552222"; this.errorTextColor = "#552222"; this.updateColors(); } updateColors() { 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 }); 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 }); this["cScalePeer" + 1] = this["cScalePeer" + 1] || darken(this.secondaryColor, 45); this["cScalePeer" + 2] = this["cScalePeer" + 2] || darken(this.tertiaryColor, 40); for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScale" + i] = darken(this["cScale" + i], 10); this["cScalePeer" + i] = this["cScalePeer" + i] || darken(this["cScale" + i], 25); } for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScaleInv" + i] = this["cScaleInv" + i] || adjust(this["cScale" + i], { h: 180 }); } for (let i = 0; i < 5; i++) { this["surface" + i] = this["surface" + i] || adjust(this.mainBkg, { h: 30, l: -(5 + i * 5) }); this["surfacePeer" + i] = this["surfacePeer" + i] || adjust(this.mainBkg, { h: 30, l: -(7 + i * 5) }); } this.scaleLabelColor = this.scaleLabelColor !== "calculated" && this.scaleLabelColor ? this.scaleLabelColor : this.labelTextColor; if (this.labelTextColor !== "calculated") { this.cScaleLabel0 = this.cScaleLabel0 || invert(this.labelTextColor); this.cScaleLabel3 = this.cScaleLabel3 || invert(this.labelTextColor); for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScaleLabel" + i] = this["cScaleLabel" + i] || this.labelTextColor; } } this.nodeBkg = this.mainBkg; this.nodeBorder = this.border1; this.clusterBkg = this.secondBkg; this.clusterBorder = this.border2; this.defaultLinkColor = this.lineColor; this.titleColor = this.textColor; this.edgeLabelBackground = this.labelBackground; this.actorBorder = lighten(this.border1, 23); this.actorBkg = this.mainBkg; this.labelBoxBkgColor = this.actorBkg; this.signalColor = this.textColor; this.signalTextColor = this.textColor; this.labelBoxBorderColor = this.actorBorder; this.labelTextColor = this.actorTextColor; this.loopTextColor = this.actorTextColor; this.noteBorderColor = this.border2; this.noteTextColor = this.actorTextColor; this.taskTextColor = this.taskTextLightColor; this.taskTextOutsideColor = this.taskTextDarkColor; this.transitionColor = this.transitionColor || this.lineColor; this.transitionLabelColor = this.transitionLabelColor || this.textColor; 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 || "#f0f0f0"; this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg; this.compositeBorder = this.compositeBorder || this.nodeBorder; this.innerEndBackground = this.nodeBorder; this.specialStateColor = this.lineColor; this.errorBkgColor = this.errorBkgColor || this.tertiaryColor; this.errorTextColor = this.errorTextColor || this.tertiaryTextColor; this.transitionColor = this.transitionColor || this.lineColor; this.classText = this.primaryTextColor; this.fillType0 = this.primaryColor; this.fillType1 = this.secondaryColor; this.fillType2 = adjust(this.primaryColor, { h: 64 }); this.fillType3 = adjust(this.secondaryColor, { h: 64 }); this.fillType4 = adjust(this.primaryColor, { h: -64 }); this.fillType5 = adjust(this.secondaryColor, { h: -64 }); this.fillType6 = adjust(this.primaryColor, { h: 128 }); this.fillType7 = adjust(this.secondaryColor, { h: 128 }); this.pie1 = this.pie1 || this.primaryColor; this.pie2 = this.pie2 || this.secondaryColor; this.pie3 = this.pie3 || adjust(this.tertiaryColor, { l: -40 }); this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 }); this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 }); this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -20 }); this.pie7 = this.pie7 || adjust(this.primaryColor, { h: 60, l: -20 }); this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -40 }); this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: -40 }); this.pie10 = this.pie10 || adjust(this.primaryColor, { h: 60, l: -40 }); this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -90, l: -40 }); this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -30 }); 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"; this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor; this.requirementTextColor = this.requirementTextColor || this.primaryTextColor; this.relationColor = this.relationColor || this.lineColor; this.relationLabelBackground = this.relationLabelBackground || this.labelBackground; this.relationLabelColor = this.relationLabelColor || this.actorTextColor; 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 || darken(invert(this.git0), 25); 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.gitBranchLabel0 = this.gitBranchLabel0 || invert(this.labelTextColor); this.gitBranchLabel1 = this.gitBranchLabel1 || this.labelTextColor; this.gitBranchLabel2 = this.gitBranchLabel2 || this.labelTextColor; this.gitBranchLabel3 = this.gitBranchLabel3 || invert(this.labelTextColor); this.gitBranchLabel4 = this.gitBranchLabel4 || this.labelTextColor; this.gitBranchLabel5 = this.gitBranchLabel5 || this.labelTextColor; this.gitBranchLabel6 = this.gitBranchLabel6 || this.labelTextColor; this.gitBranchLabel7 = this.gitBranchLabel7 || this.labelTextColor; 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"; this.attributeBackgroundColorOdd = this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd; this.attributeBackgroundColorEven = this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven; } calculate(overrides) { if (typeof overrides !== "object") { this.updateColors(); return; } const keys = Object.keys(overrides); keys.forEach((k) => { this[k] = overrides[k]; }); this.updateColors(); keys.forEach((k) => { this[k] = overrides[k]; }); } }; const getThemeVariables$2 = (userOverrides) => { const theme2 = new Theme$2(); theme2.calculate(userOverrides); return theme2; }; let Theme$1 = class Theme4 { constructor() { this.background = "#f4f4f4"; this.primaryColor = "#cde498"; this.secondaryColor = "#cdffb2"; this.background = "white"; this.mainBkg = "#cde498"; this.secondBkg = "#cdffb2"; this.lineColor = "green"; this.border1 = "#13540c"; this.border2 = "#6eaa49"; this.arrowheadColor = "green"; this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; this.fontSize = "16px"; this.tertiaryColor = lighten("#cde498", 10); this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode); this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode); this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode); this.primaryTextColor = invert(this.primaryColor); this.secondaryTextColor = invert(this.secondaryColor); this.tertiaryTextColor = invert(this.primaryColor); this.lineColor = invert(this.background); this.textColor = invert(this.background); this.THEME_COLOR_LIMIT = 12; this.nodeBkg = "calculated"; this.nodeBorder = "calculated"; this.clusterBkg = "calculated"; this.clusterBorder = "calculated"; this.defaultLinkColor = "calculated"; this.titleColor = "#333"; this.edgeLabelBackground = "#e8e8e8"; this.actorBorder = "calculated"; this.actorBkg = "calculated"; this.actorTextColor = "black"; this.actorLineColor = "grey"; this.signalColor = "#333"; this.signalTextColor = "#333"; this.labelBoxBkgColor = "calculated"; this.labelBoxBorderColor = "#326932"; this.labelTextColor = "calculated"; this.loopTextColor = "calculated"; this.noteBorderColor = "calculated"; this.noteBkgColor = "#fff5ad"; this.noteTextColor = "calculated"; this.activationBorderColor = "#666"; this.activationBkgColor = "#f4f4f4"; this.sequenceNumberColor = "white"; this.sectionBkgColor = "#6eaa49"; this.altSectionBkgColor = "white"; this.sectionBkgColor2 = "#6eaa49"; this.excludeBkgColor = "#eeeeee"; this.taskBorderColor = "calculated"; this.taskBkgColor = "#487e3a"; this.taskTextLightColor = "white"; this.taskTextColor = "calculated"; this.taskTextDarkColor = "black"; this.taskTextOutsideColor = "calculated"; this.taskTextClickableColor = "#003163"; this.activeTaskBorderColor = "calculated"; this.activeTaskBkgColor = "calculated"; this.gridColor = "lightgrey"; this.doneTaskBkgColor = "lightgrey"; this.doneTaskBorderColor = "grey"; this.critBorderColor = "#ff8888"; this.critBkgColor = "red"; this.todayLineColor = "red"; this.personBorder = "calculated"; this.personBkg = "calculated"; this.labelColor = "black"; this.errorBkgColor = "#552222"; this.errorTextColor = "#552222"; } updateColors() { 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 }); 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 }); this["cScalePeer" + 1] = this["cScalePeer" + 1] || darken(this.secondaryColor, 45); this["cScalePeer" + 2] = this["cScalePeer" + 2] || darken(this.tertiaryColor, 40); for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScale" + i] = darken(this["cScale" + i], 10); this["cScalePeer" + i] = this["cScalePeer" + i] || darken(this["cScale" + i], 25); } for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScaleInv" + i] = this["cScaleInv" + i] || adjust(this["cScale" + i], { h: 180 }); } this.scaleLabelColor = this.scaleLabelColor !== "calculated" && this.scaleLabelColor ? this.scaleLabelColor : this.labelTextColor; for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScaleLabel" + i] = this["cScaleLabel" + i] || this.scaleLabelColor; } for (let i = 0; i < 5; i++) { this["surface" + i] = this["surface" + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(5 + i * 5) }); this["surfacePeer" + i] = this["surfacePeer" + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(8 + i * 5) }); } this.nodeBkg = this.mainBkg; this.nodeBorder = this.border1; this.clusterBkg = this.secondBkg; this.clusterBorder = this.border2; this.defaultLinkColor = this.lineColor; this.actorBorder = darken(this.mainBkg, 20); this.actorBkg = this.mainBkg; this.labelBoxBkgColor = this.actorBkg; this.labelTextColor = this.actorTextColor; this.loopTextColor = this.actorTextColor; this.noteBorderColor = this.border2; this.noteTextColor = this.actorTextColor; this.taskBorderColor = this.border1; this.taskTextColor = this.taskTextLightColor; this.taskTextOutsideColor = this.taskTextDarkColor; this.activeTaskBorderColor = this.taskBorderColor; this.activeTaskBkgColor = this.mainBkg; this.transitionColor = this.transitionColor || this.lineColor; this.transitionLabelColor = this.transitionLabelColor || this.textColor; 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 || "#f0f0f0"; this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg; this.compositeBorder = this.compositeBorder || this.nodeBorder; this.innerEndBackground = this.primaryBorderColor; this.specialStateColor = this.lineColor; this.errorBkgColor = this.errorBkgColor || this.tertiaryColor; this.errorTextColor = this.errorTextColor || this.tertiaryTextColor; this.transitionColor = this.transitionColor || this.lineColor; this.classText = this.primaryTextColor; this.fillType0 = this.primaryColor; this.fillType1 = this.secondaryColor; this.fillType2 = adjust(this.primaryColor, { h: 64 }); this.fillType3 = adjust(this.secondaryColor, { h: 64 }); this.fillType4 = adjust(this.primaryColor, { h: -64 }); this.fillType5 = adjust(this.secondaryColor, { h: -64 }); this.fillType6 = adjust(this.primaryColor, { h: 128 }); this.fillType7 = adjust(this.secondaryColor, { h: 128 }); 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: -30 }); this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 }); this.pie6 = this.pie6 || adjust(this.tertiaryColor, { h: 40, l: -40 }); 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: -50 }); this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -50 }); this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -50 }); 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"; this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor; this.requirementTextColor = this.requirementTextColor || this.primaryTextColor; this.relationColor = this.relationColor || this.lineColor; this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground; this.relationLabelColor = this.relationLabelColor || this.actorTextColor; 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.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"; this.attributeBackgroundColorOdd = this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd; this.attributeBackgroundColorEven = this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven; } calculate(overrides) { if (typeof overrides !== "object") { this.updateColors(); return; } const keys = Object.keys(overrides); keys.forEach((k) => { this[k] = overrides[k]; }); this.updateColors(); keys.forEach((k) => { this[k] = overrides[k]; }); } }; const getThemeVariables$1 = (userOverrides) => { const theme2 = new Theme$1(); theme2.calculate(userOverrides); return theme2; }; class Theme5 { constructor() { this.primaryColor = "#eee"; this.contrast = "#707070"; this.secondaryColor = lighten(this.contrast, 55); this.background = "#ffffff"; this.tertiaryColor = adjust(this.primaryColor, { h: -160 }); this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode); this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode); this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode); this.primaryTextColor = invert(this.primaryColor); this.secondaryTextColor = invert(this.secondaryColor); this.tertiaryTextColor = invert(this.tertiaryColor); this.lineColor = invert(this.background); this.textColor = invert(this.background); this.mainBkg = "#eee"; this.secondBkg = "calculated"; this.lineColor = "#666"; this.border1 = "#999"; this.border2 = "calculated"; this.note = "#ffa"; this.text = "#333"; this.critical = "#d42"; this.done = "#bbb"; this.arrowheadColor = "#333333"; this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; this.fontSize = "16px"; this.THEME_COLOR_LIMIT = 12; this.nodeBkg = "calculated"; this.nodeBorder = "calculated"; this.clusterBkg = "calculated"; this.clusterBorder = "calculated"; this.defaultLinkColor = "calculated"; this.titleColor = "calculated"; this.edgeLabelBackground = "white"; this.actorBorder = "calculated"; this.actorBkg = "calculated"; this.actorTextColor = "calculated"; this.actorLineColor = "calculated"; this.signalColor = "calculated"; this.signalTextColor = "calculated"; this.labelBoxBkgColor = "calculated"; this.labelBoxBorderColor = "calculated"; this.labelTextColor = "calculated"; this.loopTextColor = "calculated"; this.noteBorderColor = "calculated"; this.noteBkgColor = "calculated"; this.noteTextColor = "calculated"; this.activationBorderColor = "#666"; this.activationBkgColor = "#f4f4f4"; this.sequenceNumberColor = "white"; this.sectionBkgColor = "calculated"; this.altSectionBkgColor = "white"; this.sectionBkgColor2 = "calculated"; this.excludeBkgColor = "#eeeeee"; this.taskBorderColor = "calculated"; this.taskBkgColor = "calculated"; this.taskTextLightColor = "white"; this.taskTextColor = "calculated"; this.taskTextDarkColor = "calculated"; this.taskTextOutsideColor = "calculated"; this.taskTextClickableColor = "#003163"; this.activeTaskBorderColor = "calculated"; this.activeTaskBkgColor = "calculated"; this.gridColor = "calculated"; this.doneTaskBkgColor = "calculated"; this.doneTaskBorderColor = "calculated"; this.critBkgColor = "calculated"; this.critBorderColor = "calculated"; this.todayLineColor = "calculated"; this.personBorder = "calculated"; this.personBkg = "calculated"; this.labelColor = "black"; this.errorBkgColor = "#552222"; this.errorTextColor = "#552222"; } updateColors() { this.secondBkg = lighten(this.contrast, 55); this.border2 = this.contrast; this.cScale0 = this.cScale0 || "#555"; this.cScale1 = this.cScale1 || "#F4F4F4"; this.cScale2 = this.cScale2 || "#555"; this.cScale3 = this.cScale3 || "#BBB"; this.cScale4 = this.cScale4 || "#777"; this.cScale5 = this.cScale5 || "#999"; this.cScale6 = this.cScale6 || "#DDD"; this.cScale7 = this.cScale7 || "#FFF"; this.cScale8 = this.cScale8 || "#DDD"; this.cScale9 = this.cScale9 || "#BBB"; this.cScale10 = this.cScale10 || "#999"; this.cScale11 = this.cScale11 || "#777"; for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScaleInv" + i] = this["cScaleInv" + i] || invert(this["cScale" + i]); } 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); } } this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? "black" : this.labelTextColor); this["cScaleLabel0"] = this["cScaleLabel0"] || this.cScale1; this["cScaleLabel2"] = this["cScaleLabel2"] || this.cScale1; for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["cScaleLabel" + i] = this["cScaleLabel" + i] || this.scaleLabelColor; } for (let i = 0; i < 5; i++) { this["surface" + i] = this["surface" + i] || adjust(this.mainBkg, { l: -(5 + i * 5) }); this["surfacePeer" + i] = this["surfacePeer" + i] || adjust(this.mainBkg, { l: -(8 + i * 5) }); } this.nodeBkg = this.mainBkg; this.nodeBorder = this.border1; this.clusterBkg = this.secondBkg; this.clusterBorder = this.border2; this.defaultLinkColor = this.lineColor; this.titleColor = this.text; this.actorBorder = lighten(this.border1, 23); this.actorBkg = this.mainBkg; this.actorTextColor = this.text; this.actorLineColor = this.lineColor; this.signalColor = this.text; this.signalTextColor = this.text; this.labelBoxBkgColor = this.actorBkg; this.labelBoxBorderColor = this.actorBorder; this.labelTextColor = this.text; this.loopTextColor = this.text; this.noteBorderColor = "#999"; this.noteBkgColor = "#666"; this.noteTextColor = "#fff"; this.sectionBkgColor = lighten(this.contrast, 30); this.sectionBkgColor2 = lighten(this.contrast, 30); this.taskBorderColor = darken(this.contrast, 10); this.taskBkgColor = this.contrast; this.taskTextColor = this.taskTextLightColor; this.taskTextDarkColor = this.text; this.taskTextOutsideColor = this.taskTextDarkColor; this.activeTaskBorderColor = this.taskBorderColor; this.activeTaskBkgColor = this.mainBkg; this.gridColor = lighten(this.border1, 30); this.doneTaskBkgColor = this.done; this.doneTaskBorderColor = this.lineColor; this.critBkgColor = this.critical; this.critBorderColor = darken(this.critBkgColor, 10); this.todayLineColor = this.critBkgColor; this.transitionColor = this.transitionColor || "#000"; this.transitionLabelColor = this.transitionLabelColor || this.textColor; 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 || "#f4f4f4"; this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg; this.stateBorder = this.stateBorder || "#000"; this.innerEndBackground = this.primaryBorderColor; this.specialStateColor = "#222"; this.errorBkgColor = this.errorBkgColor || this.tertiaryColor; this.errorTextColor = this.errorTextColor || this.tertiaryTextColor; this.classText = this.primaryTextColor; this.fillType0 = this.primaryColor; this.fillType1 = this.secondaryColor; this.fillType2 = adjust(this.primaryColor, { h: 64 }); this.fillType3 = adjust(this.secondaryColor, { h: 64 }); this.fillType4 = adjust(this.primaryColor, { h: -64 }); this.fillType5 = adjust(this.secondaryColor, { h: -64 }); this.fillType6 = adjust(this.primaryColor, { h: 128 }); this.fillType7 = adjust(this.secondaryColor, { h: 128 }); for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { this["pie" + i] = this["cScale" + i]; } this.pie12 = this.pie0; 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"; this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor; this.requirementTextColor = this.requirementTextColor || this.primaryTextColor; this.relationColor = this.relationColor || this.lineColor; this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground; this.relationLabelColor = this.relationLabelColor || this.actorTextColor; this.git0 = darken(this.pie1, 25) || this.primaryColor; this.git1 = this.pie2 || this.secondaryColor; this.git2 = this.pie3 || this.tertiaryColor; this.git3 = this.pie4 || adjust(this.primaryColor, { h: -30 }); this.git4 = this.pie5 || adjust(this.primaryColor, { h: -60 }); this.git5 = this.pie6 || adjust(this.primaryColor, { h: -90 }); this.git6 = this.pie7 || adjust(this.primaryColor, { h: 60 }); this.git7 = this.pie8 || adjust(this.primaryColor, { h: 120 }); 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.labelTextColor; this.gitBranchLabel0 = this.branchLabelColor; this.gitBranchLabel1 = "white"; this.gitBranchLabel2 = this.branchLabelColor; this.gitBranchLabel3 = "white"; this.gitBranchLabel4 = this.branchLabelColor; this.gitBranchLabel5 = this.branchLabelColor; this.gitBranchLabel6 = this.branchLabelColor; 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"; this.attributeBackgroundColorOdd = this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd; this.attributeBackgroundColorEven = this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven; } calculate(overrides) { if (typeof overrides !== "object") { this.updateColors(); return; } const keys = Object.keys(overrides); keys.forEach((k) => { this[k] = overrides[k]; }); this.updateColors(); keys.forEach((k) => { this[k] = overrides[k]; }); } } const getThemeVariables = (userOverrides) => { const theme2 = new Theme5(); theme2.calculate(userOverrides); return theme2; }; const theme = { base: { getThemeVariables: getThemeVariables$4 }, dark: { getThemeVariables: getThemeVariables$3 }, default: { getThemeVariables: getThemeVariables$2 }, forest: { getThemeVariables: getThemeVariables$1 }, neutral: { getThemeVariables } }; const config = { /** * Theme , the CSS style sheet * * | Parameter | Description | Type | Required | Values | * | --------- | --------------- | ------ | -------- | ---------------------------------------------- | * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' | * * **Notes:** To disable any pre-defined mermaid theme, use "null". * * @example * * ```js * { * "theme": "forest", * "themeCSS": ".node rect { fill: red; }" * } * ``` */ theme: "default", themeVariables: theme["default"].getThemeVariables(), themeCSS: void 0, /* **maxTextSize** - The maximum allowed size of the users text diagram */ maxTextSize: 5e4, darkMode: false, /** * | Parameter | Description | Type | Required | Values | * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- | * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily | * * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'. */ fontFamily: '"trebuchet ms", verdana, arial, sans-serif;', /** * | Parameter | Description | Type | Required | Values | * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- | * | logLevel | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' | * * **Notes:** * * - Trace: 0 * - Debug: 1 * - Info: 2 * - Warn: 3 * - Error: 4 * - Fatal: 5 (default) */ logLevel: 5, /** * | Parameter | Description | Type | Required | Values | * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' | * * **Notes**: * * - **strict**: (**default**) tags in text are encoded, click functionality is disabled * - **loose**: tags in text are allowed, click functionality is enabled * - **antiscript**: html tags in text are allowed, (only script element is removed), click * functionality is enabled * - **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This * prevent any JavaScript from running in the context. This may hinder interactive functionality * of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. */ securityLevel: "strict", /** * | Parameter | Description | Type | Required | Values | * | ----------- | -------------------------------------------- | ------- | -------- | ----------- | * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false | * * **Notes:** Default value: true */ startOnLoad: true, /** * | Parameter | Description | Type | Required | Values | * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- | * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false | * * **Notes**: * * This matters if you are using base tag settings. * * Default value: false */ arrowMarkerAbsolute: false, /** * This option controls which currentConfig keys are considered _secure_ and can only be changed * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the * `secure` keys in the current currentConfig. This prevents malicious graph directives from * overriding a site's default security. * * **Notes**: * * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] */ secure: ["secure", "securityLevel", "startOnLoad", "maxTextSize"], /** * This option controls if the generated ids of nodes in the SVG are generated randomly or based * on a seed. If set to false, the IDs are generated based on the current date and thus are not * deterministic. This is the default behavior. * * **Notes**: * * This matters if your files are checked into source control e.g. git and should not change unless * content is changed. * * Default value: false */ deterministicIds: false, /** * This option is the optional seed for deterministic ids. if set to undefined but * deterministicIds is true, a simple number iterator is used. You can set this attribute to base * the seed on a static string. */ deterministicIDSeed: void 0, /** The object containing configurations specific for flowcharts */ flowchart: { /** * ### titleTopMargin * * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | * | titleTopMargin | Margin top for the text over the flowchart | Integer | Required | Any Positive Value | * * **Notes:** Default value: 25 */ titleTopMargin: 25, /** * | Parameter | Description | Type | Required | Values | * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | * * **Notes:** * * The amount of padding around the diagram as a whole so that embedded diagrams have margins, * expressed in pixels * * Default value: 8 */ diagramPadding: 8, /** * | Parameter | Description | Type | Required | Values | * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false | * * **Notes:** Default value: true. */ htmlLabels: true, /** * | Parameter | Description | Type | Required | Values | * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- | * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number | * * **Notes:** * * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the * vertical spacing for LR as well as RL graphs.** * * Default value: 50 */ nodeSpacing: 50, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- | * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number | * * **Notes**: * * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal * spacing for LR as well as RL graphs. * * Default value 50 */ rankSpacing: 50, /** * | Parameter | Description | Type | Required | Values | * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- | * | curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' | * * **Notes:** * * Default Value: 'basis' */ curve: "basis", // Only used in new experimental rendering // represents the padding between the labels and the shape padding: 15, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ----------- | ------- | -------- | ----------------------- | * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper, elk | * * **Notes:** * * Decides which rendering engine that is to be used for the rendering. Legal values are: * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using * elkjs * * Default value: 'dagre-wrapper' */ defaultRenderer: "dagre-wrapper", /** * | Parameter | Description | Type | Required | Values | * | --------------- | ----------- | ------- | -------- | ----------------------- | * | wrappingWidth | See notes | number | 4 | width of nodes where text is wrapped | * * **Notes:** * * When using markdown strings the text ius wrapped automatically, this * value sets the max width of a text before it continues on a new line. * Default value: 'dagre-wrapper' */ wrappingWidth: 200 }, /** The object containing configurations specific for sequence diagrams */ sequence: { hideUnusedParticipants: false, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ---------------------------- | ------- | -------- | ------------------ | * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value | * * **Notes:** Default value :10 */ activationWidth: 10, /** * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ diagramMarginX: 50, /** * | Parameter | Description | Type | Required | Values | * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ diagramMarginY: 10, /** * | Parameter | Description | Type | Required | Values | * | ----------- | --------------------- | ------- | -------- | ------------------ | * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ actorMargin: 50, /** * | Parameter | Description | Type | Required | Values | * | --------- | -------------------- | ------- | -------- | ------------------ | * | width | Width of actor boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 150 */ width: 150, /** * | Parameter | Description | Type | Required | Values | * | --------- | --------------------- | ------- | -------- | ------------------ | * | height | Height of actor boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 65 */ height: 65, /** * | Parameter | Description | Type | Required | Values | * | --------- | ------------------------ | ------- | -------- | ------------------ | * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ boxMargin: 10, /** * | Parameter | Description | Type | Required | Values | * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 5 */ boxTextMargin: 5, /** * | Parameter | Description | Type | Required | Values | * | ---------- | ------------------- | ------- | -------- | ------------------ | * | noteMargin | margin around notes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ noteMargin: 10, /** * | Parameter | Description | Type | Required | Values | * | ------------- | ---------------------- | ------- | -------- | ------------------ | * | messageMargin | Space between messages | Integer | Required | Any Positive Value | * * **Notes:** Default value: 35 */ messageMargin: 35, /** * | Parameter | Description | Type | Required | Values | * | ------------ | --------------------------- | ------ | -------- | ------------------------- | * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' | * * **Notes:** Default value: 'center' */ messageAlign: "center", /** * | Parameter | Description | Type | Required | Values | * | ------------ | --------------------------- | ------- | -------- | ----------- | * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false | * * **Notes:** Default value: true */ mirrorActors: true, /** * | Parameter | Description | Type | Required | Values | * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- | * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False | * * **Notes:** * * Default value: false. */ forceMenus: false, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value | * * **Notes:** * * Depending on css styling this might need adjustment. * * Default value: 1 */ bottomMarginAdj: 1, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See Notes | boolean | Required | true, false | * * **Notes:** When this flag is set to true, the height and width is set to 100% and is then * scaling with the available space. If set to false, the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ------------------------------------ | ------- | -------- | ----------- | * | rightAngles | display curve arrows as right angles | boolean | Required | true, false | * * **Notes:** * * This will display arrows that start and begin at the same node as right angles, rather than a * curve * * Default value: false */ rightAngles: false, /** * | Parameter | Description | Type | Required | Values | * | ------------------- | ------------------------------- | ------- | -------- | ----------- | * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false | * * **Notes:** Default value: false */ showSequenceNumbers: false, /** * | Parameter | Description | Type | Required | Values | * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ | * | actorFontSize | This sets the font size of the actor's description | Integer | Require | Any Positive Value | * * **Notes:** **Default value 14**.. */ actorFontSize: 14, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- | * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily | * * **Notes:** Default value: "'Open Sans", sans-serif' */ actorFontFamily: '"Open Sans", sans-serif', /** * This sets the font weight of the actor's description * * **Notes:** Default value: 400. */ actorFontWeight: 400, /** * | Parameter | Description | Type | Required | Values | * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ | * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 14 */ noteFontSize: 14, /** * | Parameter | Description | Type | Required | Values | * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- | * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily | * * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif' */ noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif', /** * This sets the font weight of the note's description * * **Notes:** Default value: 400 */ noteFontWeight: 400, /** * | Parameter | Description | Type | Required | Values | * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- | * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' | * * **Notes:** Default value: 'center' */ noteAlign: "center", /** * | Parameter | Description | Type | Required | Values | * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- | * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number | * * **Notes:** Default value: 16 */ messageFontSize: 16, /** * | Parameter | Description | Type | Required | Values | * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- | * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily | * * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif' */ messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif', /** * This sets the font weight of the message's description * * **Notes:** Default value: 400. */ messageFontWeight: 400, /** * This sets the auto-wrap state for the diagram * * **Notes:** Default value: false. */ wrap: false, /** * This sets the auto-wrap padding for the diagram (sides only) * * **Notes:** Default value: 0. */ wrapPadding: 10, /** * This sets the width of the loop-box (loop, alt, opt, par) * * **Notes:** Default value: 50. */ labelBoxWidth: 50, /** * This sets the height of the loop-box (loop, alt, opt, par) * * **Notes:** Default value: 20. */ labelBoxHeight: 20, messageFont: function() { return { fontFamily: this.messageFontFamily, fontSize: this.messageFontSize, fontWeight: this.messageFontWeight }; }, noteFont: function() { return { fontFamily: this.noteFontFamily, fontSize: this.noteFontSize, fontWeight: this.noteFontWeight }; }, actorFont: function() { return { fontFamily: this.actorFontFamily, fontSize: this.actorFontSize, fontWeight: this.actorFontWeight }; } }, /** The object containing configurations specific for gantt diagrams */ gantt: { /** * ### titleTopMargin * * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 25 */ titleTopMargin: 25, /** * | Parameter | Description | Type | Required | Values | * | --------- | ----------------------------------- | ------- | -------- | ------------------ | * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value | * * **Notes:** Default value: 20 */ barHeight: 20, /** * | Parameter | Description | Type | Required | Values | * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ | * | barGap | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value | * * **Notes:** Default value: 4 */ barGap: 4, /** * | Parameter | Description | Type | Required | Values | * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ | * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ topPadding: 50, /** * | Parameter | Description | Type | Required | Values | * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ | * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value | * * **Notes:** Default value: 75 */ rightPadding: 75, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ | * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value | * * **Notes:** Default value: 75 */ leftPadding: 75, /** * | Parameter | Description | Type | Required | Values | * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ | * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value | * * **Notes:** Default value: 35 */ gridLineStartPadding: 35, /** * | Parameter | Description | Type | Required | Values | * | --------- | ----------- | ------- | -------- | ------------------ | * | fontSize | Font size | Integer | Required | Any Positive Value | * * **Notes:** Default value: 11 */ fontSize: 11, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ---------------------- | ------- | -------- | ------------------ | * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value | * * **Notes:** Default value: 11 */ sectionFontSize: 11, /** * | Parameter | Description | Type | Required | Values | * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ | * | numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value | * * **Notes:** Default value: 4 */ numberSectionStyles: 4, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ------------------------- | ------ | -------- | --------- | * | displayMode | Controls the display mode | string | 4 | 'compact' | * * **Notes**: * * - **compact**: Enables displaying multiple tasks on the same row. */ displayMode: "", /** * | Parameter | Description | Type | Required | Values | * | ---------- | ---------------------------- | ---- | -------- | ---------------- | * | axisFormat | Date/time format of the axis | 3 | Required | Date in yy-mm-dd | * * **Notes:** * * This might need adjustment to match your locale and preferences * * Default value: '%Y-%m-%d'. */ axisFormat: "%Y-%m-%d", /** * | Parameter | Description | Type | Required | Values | * | ------------ | ------------| ------ | -------- | ------- | * | tickInterval | axis ticks | string | Optional | string | * * **Notes:** * * Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/ * * Default value: undefined */ tickInterval: void 0, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | --------- | ----------- | ------- | -------- | ----------- | * | topAxis | See notes | Boolean | 4 | True, False | * * **Notes:** when this flag is set date labels will be added to the top of the chart * * **Default value false**. */ topAxis: false, useWidth: void 0 }, /** The object containing configurations specific for journey diagrams */ journey: { /** * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ diagramMarginX: 50, /** * | Parameter | Description | Type | Required | Values | * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ diagramMarginY: 10, /** * | Parameter | Description | Type | Required | Values | * | ----------- | --------------------- | ------- | -------- | ------------------ | * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ leftMargin: 150, /** * | Parameter | Description | Type | Required | Values | * | --------- | -------------------- | ------- | -------- | ------------------ | * | width | Width of actor boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 150 */ width: 150, /** * | Parameter | Description | Type | Required | Values | * | --------- | --------------------- | ------- | -------- | ------------------ | * | height | Height of actor boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 65 */ height: 50, /** * | Parameter | Description | Type | Required | Values | * | --------- | ------------------------ | ------- | -------- | ------------------ | * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ boxMargin: 10, /** * | Parameter | Description | Type | Required | Values | * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 5 */ boxTextMargin: 5, /** * | Parameter | Description | Type | Required | Values | * | ---------- | ------------------- | ------- | -------- | ------------------ | * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ noteMargin: 10, /** * | Parameter | Description | Type | Required | Values | * | ------------- | ----------------------- | ------- | -------- | ------------------ | * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | * * **Notes:** * * Space between messages. * * Default value: 35 */ messageMargin: 35, /** * | Parameter | Description | Type | Required | Values | * | ------------ | --------------------------- | ---- | -------- | ------------------------- | * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | * * **Notes:** Default value: 'center' */ messageAlign: "center", /** * | Parameter | Description | Type | Required | Values | * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | * * **Notes:** * * Depending on css styling this might need adjustment. * * Default value: 1 */ bottomMarginAdj: 1, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | ----------- | --------------------------------- | ---- | -------- | ----------- | * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | * * **Notes:** * * This will display arrows that start and begin at the same node as right angles, rather than a * curves * * Default value: 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"] }, /** The object containing configurations specific for timeline diagrams */ timeline: { /** * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ diagramMarginX: 50, /** * | Parameter | Description | Type | Required | Values | * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ diagramMarginY: 10, /** * | Parameter | Description | Type | Required | Values | * | ----------- | --------------------- | ------- | -------- | ------------------ | * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ leftMargin: 150, /** * | Parameter | Description | Type | Required | Values | * | --------- | -------------------- | ------- | -------- | ------------------ | * | width | Width of actor boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 150 */ width: 150, /** * | Parameter | Description | Type | Required | Values | * | --------- | --------------------- | ------- | -------- | ------------------ | * | height | Height of actor boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 65 */ height: 50, /** * | Parameter | Description | Type | Required | Values | * | --------- | ------------------------ | ------- | -------- | ------------------ | * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ boxMargin: 10, /** * | Parameter | Description | Type | Required | Values | * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 5 */ boxTextMargin: 5, /** * | Parameter | Description | Type | Required | Values | * | ---------- | ------------------- | ------- | -------- | ------------------ | * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ noteMargin: 10, /** * | Parameter | Description | Type | Required | Values | * | ------------- | ----------------------- | ------- | -------- | ------------------ | * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | * * **Notes:** * * Space between messages. * * Default value: 35 */ messageMargin: 35, /** * | Parameter | Description | Type | Required | Values | * | ------------ | --------------------------- | ---- | -------- | ------------------------- | * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | * * **Notes:** Default value: 'center' */ messageAlign: "center", /** * | Parameter | Description | Type | Required | Values | * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | * * **Notes:** * * Depending on css styling this might need adjustment. * * Default value: 1 */ bottomMarginAdj: 1, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | ----------- | --------------------------------- | ---- | -------- | ----------- | * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | * * **Notes:** * * This will display arrows that start and begin at the same node as right angles, rather than a * curves * * Default value: 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"], disableMulticolor: false }, class: { /** * ### titleTopMargin * * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 25 */ titleTopMargin: 25, arrowMarkerAbsolute: false, dividerMargin: 10, padding: 5, textHeight: 10, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ----------- | ------- | -------- | ----------------------- | * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | * * **Notes**: * * Decides which rendering engine that is to be used for the rendering. Legal values are: * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid * * Default value: 'dagre-d3' */ defaultRenderer: "dagre-wrapper" }, state: { /** * ### titleTopMargin * * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 25 */ titleTopMargin: 25, dividerMargin: 10, sizeUnit: 5, padding: 8, textHeight: 10, titleShift: -15, noteMargin: 10, forkWidth: 70, forkHeight: 7, // Used miniPadding: 2, // Font size factor, this is used to guess the width of the edges labels before rendering by dagre // layout. This might need updating if/when switching font fontSizeFactor: 5.02, fontSize: 24, labelHeight: 16, edgeLengthFactor: "20", compositTitleSize: 35, radius: 5, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See notes | boolean | 4 | true, false | * * **Notes:** * * When this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ----------- | ------- | -------- | ----------------------- | * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | * * **Notes:** * * Decides which rendering engine that is to be used for the rendering. Legal values are: * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid * * Default value: 'dagre-d3' */ defaultRenderer: "dagre-wrapper" }, /** The object containing configurations specific for entity relationship diagrams */ er: { /** * ### titleTopMargin * * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | * | titleTopMargin | Margin top for the text over the diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 25 */ titleTopMargin: 25, /** * | Parameter | Description | Type | Required | Values | * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | * * **Notes:** * * The amount of padding around the diagram as a whole so that embedded diagrams have margins, * expressed in pixels * * Default value: 20 */ diagramPadding: 20, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- | * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" | * * **Notes:** * * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left. * * T = top, B = bottom, L = left, and R = right. * * Default value: 'TB' */ layoutDirection: "TB", /** * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------- | ------- | -------- | ------------------ | * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value | * * **Notes:** Expressed in pixels. Default value: 100 */ minEntityWidth: 100, /** * | Parameter | Description | Type | Required | Values | * | --------------- | ----------------------------------- | ------- | -------- | ------------------ | * | minEntityHeight | The minimum height of an entity box | Integer | 4 | Any Positive Value | * * **Notes:** Expressed in pixels Default value: 75 */ minEntityHeight: 75, /** * | Parameter | Description | Type | Required | Values | * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ | * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value | * * **Notes:** * * The minimum internal padding between text in an entity box and the enclosing box borders, * expressed in pixels. * * Default value: 15 */ entityPadding: 15, /** * | Parameter | Description | Type | Required | Values | * | --------- | ----------------------------------- | ------ | -------- | -------------------- | * | stroke | Stroke color of box edges and lines | string | 4 | Any recognized color | * * **Notes:** Default value: 'gray' */ stroke: "gray", /** * | Parameter | Description | Type | Required | Values | * | --------- | -------------------------- | ------ | -------- | -------------------- | * | fill | Fill color of entity boxes | string | 4 | Any recognized color | * * **Notes:** Default value: 'honeydew' */ fill: "honeydew", /** * | Parameter | Description | Type | Required | Values | * | --------- | ------------------- | ------- | -------- | ------------------ | * | fontSize | Font Size in pixels | Integer | | Any Positive Value | * * **Notes:** * * Font size (expressed as an integer representing a number of pixels) Default value: 12 */ fontSize: 12, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See Notes | boolean | Required | true, false | * * **Notes:** * * When this flag is set to true, the diagram width is locked to 100% and scaled based on * available space. If set to false, the diagram reserves its absolute width. * * Default value: true */ useMaxWidth: true }, /** The object containing configurations specific for pie diagrams */ pie: { useWidth: void 0, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See Notes | boolean | Required | true, false | * * **Notes:** * * When this flag is set to true, the diagram width is locked to 100% and scaled based on * available space. If set to false, the diagram reserves its absolute width. * * Default value: true */ useMaxWidth: true, /** * | Parameter | Description | Type | Required | Values | * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- | * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number | Optional | Decimal from 0 to 1 | * * **Notes:** Default value: 0.75 */ textPosition: 0.75 }, /** The object containing configurations specific for req diagrams */ requirement: { useWidth: void 0, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See Notes | boolean | Required | true, false | * * **Notes:** * * When this flag is set to true, the diagram width is locked to 100% and scaled based on * available space. If set to false, the diagram reserves its absolute width. * * Default value: true */ useMaxWidth: true, rect_fill: "#f9f9f9", text_color: "#333", rect_border_size: "0.5px", rect_border_color: "#bbb", rect_min_width: 200, rect_min_height: 200, fontSize: 14, rect_padding: 10, line_height: 20 }, gitGraph: { /** * ### titleTopMargin * * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | * | titleTopMargin | Margin top for the text over the Git diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 25 */ titleTopMargin: 25, diagramPadding: 8, nodeLabel: { width: 75, height: 100, x: -25, y: 0 }, mainBranchName: "main", mainBranchOrder: 0, showCommitLabel: true, showBranches: true, rotateCommitLabel: true }, /** The object containing configurations specific for c4 diagrams */ c4: { useWidth: void 0, /** * | Parameter | Description | Type | Required | Values | * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 50 */ diagramMarginX: 50, /** * | Parameter | Description | Type | Required | Values | * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ | * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ diagramMarginY: 10, /** * | 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, /** * | Parameter | Description | Type | Required | Values | * | --------- | --------------------- | ------- | -------- | ------------------ | * | width | Width of person boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 216 */ width: 216, /** * | Parameter | Description | Type | Required | Values | * | --------- | ---------------------- | ------- | -------- | ------------------ | * | height | Height of person boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 60 */ height: 60, /** * | Parameter | Description | Type | Required | Values | * | --------- | ------------------- | ------- | -------- | ------------------ | * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value | * * **Notes:** Default value: 10 */ boxMargin: 10, /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | * | useMaxWidth | See Notes | boolean | Required | true, false | * * **Notes:** When this flag is set to true, the height and width is set to 100% and is then * scaling with the available space. If set to false, the absolute space required is used. * * Default value: true */ 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 boundaries 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", /** * This sets the auto-wrap state for the diagram * * **Notes:** Default value: true. */ wrap: true, /** * This sets the auto-wrap padding for the diagram (sides only) * * **Notes:** Default value: 0. */ wrapPadding: 10, personFont: function() { return { fontFamily: this.personFontFamily, fontSize: this.personFontSize, fontWeight: this.personFontWeight }; }, external_personFont: function() { return { fontFamily: this.external_personFontFamily, fontSize: this.external_personFontSize, fontWeight: this.external_personFontWeight }; }, systemFont: function() { return { fontFamily: this.systemFontFamily, fontSize: this.systemFontSize, fontWeight: this.systemFontWeight }; }, external_systemFont: function() { return { fontFamily: this.external_systemFontFamily, fontSize: this.external_systemFontSize, fontWeight: this.external_systemFontWeight }; }, system_dbFont: function() { return { fontFamily: this.system_dbFontFamily, fontSize: this.system_dbFontSize, fontWeight: this.system_dbFontWeight }; }, external_system_dbFont: function() { return { fontFamily: this.external_system_dbFontFamily, fontSize: this.external_system_dbFontSize, fontWeight: this.external_system_dbFontWeight }; }, system_queueFont: function() { return { fontFamily: this.system_queueFontFamily, fontSize: this.system_queueFontSize, fontWeight: this.system_queueFontWeight }; }, external_system_queueFont: function() { return { fontFamily: this.external_system_queueFontFamily, fontSize: this.external_system_queueFontSize, fontWeight: this.external_system_queueFontWeight }; }, containerFont: function() { return { fontFamily: this.containerFontFamily, fontSize: this.containerFontSize, fontWeight: this.containerFontWeight }; }, external_containerFont: function() { return { fontFamily: this.external_containerFontFamily, fontSize: this.external_containerFontSize, fontWeight: this.external_containerFontWeight }; }, container_dbFont: function() { return { fontFamily: this.container_dbFontFamily, fontSize: this.container_dbFontSize, fontWeight: this.container_dbFontWeight }; }, external_container_dbFont: function() { return { fontFamily: this.external_container_dbFontFamily, fontSize: this.external_container_dbFontSize, fontWeight: this.external_container_dbFontWeight }; }, container_queueFont: function() { return { fontFamily: this.container_queueFontFamily, fontSize: this.container_queueFontSize, fontWeight: this.container_queueFontWeight }; }, external_container_queueFont: function() { return { fontFamily: this.external_container_queueFontFamily, fontSize: this.external_container_queueFontSize, fontWeight: this.external_container_queueFontWeight }; }, componentFont: function() { return { fontFamily: this.componentFontFamily, fontSize: this.componentFontSize, fontWeight: this.componentFontWeight }; }, external_componentFont: function() { return { fontFamily: this.external_componentFontFamily, fontSize: this.external_componentFontSize, fontWeight: this.external_componentFontWeight }; }, component_dbFont: function() { return { fontFamily: this.component_dbFontFamily, fontSize: this.component_dbFontSize, fontWeight: this.component_dbFontWeight }; }, external_component_dbFont: function() { return { fontFamily: this.external_component_dbFontFamily, fontSize: this.external_component_dbFontSize, fontWeight: this.external_component_dbFontWeight }; }, component_queueFont: function() { return { fontFamily: this.component_queueFontFamily, fontSize: this.component_queueFontSize, fontWeight: this.component_queueFontWeight }; }, external_component_queueFont: function() { return { fontFamily: this.external_component_queueFontFamily, fontSize: this.external_component_queueFontSize, fontWeight: this.external_component_queueFontWeight }; }, boundaryFont: function() { return { fontFamily: this.boundaryFontFamily, fontSize: this.boundaryFontSize, fontWeight: this.boundaryFontWeight }; }, messageFont: function() { return { fontFamily: this.messageFontFamily, fontSize: this.messageFontSize, fontWeight: this.messageFontWeight }; }, // ' Colors // ' ################################## person_bg_color: "#08427B", person_border_color: "#073B6F", external_person_bg_color: "#686868", external_person_border_color: "#8A8A8A", system_bg_color: "#1168BD", system_border_color: "#3C7FC0", system_db_bg_color: "#1168BD", system_db_border_color: "#3C7FC0", system_queue_bg_color: "#1168BD", system_queue_border_color: "#3C7FC0", external_system_bg_color: "#999999", external_system_border_color: "#8A8A8A", external_system_db_bg_color: "#999999", external_system_db_border_color: "#8A8A8A", external_system_queue_bg_color: "#999999", external_system_queue_border_color: "#8A8A8A", container_bg_color: "#438DD5", container_border_color: "#3C7FC0", container_db_bg_color: "#438DD5", container_db_border_color: "#3C7FC0", container_queue_bg_color: "#438DD5", container_queue_border_color: "#3C7FC0", external_container_bg_color: "#B3B3B3", external_container_border_color: "#A6A6A6", external_container_db_bg_color: "#B3B3B3", external_container_db_border_color: "#A6A6A6", external_container_queue_bg_color: "#B3B3B3", external_container_queue_border_color: "#A6A6A6", component_bg_color: "#85BBF0", component_border_color: "#78A8D8", component_db_bg_color: "#85BBF0", component_db_border_color: "#78A8D8", component_queue_bg_color: "#85BBF0", component_queue_border_color: "#78A8D8", external_component_bg_color: "#CCCCCC", external_component_border_color: "#BFBFBF", external_component_db_bg_color: "#CCCCCC", external_component_db_border_color: "#BFBFBF", external_component_queue_bg_color: "#CCCCCC", external_component_queue_border_color: "#BFBFBF" }, mindmap: { useMaxWidth: true, padding: 10, maxNodeWidth: 200 }, fontSize: 16 }; if (config.class) { config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; } if (config.gitGraph) { config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute; } const keyify = (obj, prefix = "") => Object.keys(obj).reduce((res, el) => { if (Array.isArray(obj[el])) { return res; } else if (typeof obj[el] === "object" && obj[el] !== null) { return [...res, prefix + el, ...keyify(obj[el], "")]; } return [...res, prefix + el]; }, []); const configKeys = keyify(config, ""); const config$1 = config; const assignWithDepth = function(dst, src, config2) { const { depth, clobber } = Object.assign({ depth: 2, clobber: false }, config2); if (Array.isArray(src) && !Array.isArray(dst)) { src.forEach((s) => assignWithDepth(dst, s, config2)); return dst; } else if (Array.isArray(src) && Array.isArray(dst)) { src.forEach((s) => { if (!dst.includes(s)) { dst.push(s); } }); return dst; } if (dst === void 0 || depth <= 0) { if (dst !== void 0 && dst !== null && typeof dst === "object" && typeof src === "object") { return Object.assign(dst, src); } else { return src; } } if (src !== void 0 && typeof dst === "object" && typeof src === "object") { Object.keys(src).forEach((key) => { if (typeof src[key] === "object" && (dst[key] === void 0 || typeof dst[key] === "object")) { if (dst[key] === void 0) { dst[key] = Array.isArray(src[key]) ? [] : {}; } dst[key] = assignWithDepth(dst[key], src[key], { depth: depth - 1, clobber }); } else if (clobber || typeof dst[key] !== "object" && typeof src[key] !== "object") { dst[key] = src[key]; } }); } return dst; }; const assignWithDepth$1 = assignWithDepth; const defaultConfig = Object.freeze(config$1); let siteConfig = assignWithDepth$1({}, defaultConfig); let configFromInitialize; let directives = []; let currentConfig = assignWithDepth$1({}, defaultConfig); const updateCurrentConfig = (siteCfg, _directives) => { let cfg = assignWithDepth$1({}, siteCfg); let sumOfDirectives = {}; for (const d of _directives) { sanitize(d); sumOfDirectives = assignWithDepth$1(sumOfDirectives, d); } cfg = assignWithDepth$1(cfg, sumOfDirectives); if (sumOfDirectives.theme && sumOfDirectives.theme in theme) { const tmpConfigFromInitialize = assignWithDepth$1({}, configFromInitialize); const themeVariables = assignWithDepth$1( tmpConfigFromInitialize.themeVariables || {}, sumOfDirectives.themeVariables ); if (cfg.theme && cfg.theme in theme) { cfg.themeVariables = theme[cfg.theme].getThemeVariables(themeVariables); } } currentConfig = cfg; checkConfig(currentConfig); return currentConfig; }; const setSiteConfig = (conf) => { siteConfig = assignWithDepth$1({}, defaultConfig); siteConfig = assignWithDepth$1(siteConfig, conf); if (conf.theme && theme[conf.theme]) { siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables); } updateCurrentConfig(siteConfig, directives); return siteConfig; }; const saveConfigFromInitialize = (conf) => { configFromInitialize = assignWithDepth$1({}, conf); }; const updateSiteConfig = (conf) => { siteConfig = assignWithDepth$1(siteConfig, conf); updateCurrentConfig(siteConfig, directives); return siteConfig; }; const getSiteConfig = () => { return assignWithDepth$1({}, siteConfig); }; const setConfig = (conf) => { checkConfig(conf); assignWithDepth$1(currentConfig, conf); return getConfig(); }; const getConfig = () => { return assignWithDepth$1({}, currentConfig); }; const sanitize = (options) => { ["secure", ...siteConfig.secure ?? []].forEach((key) => { if (options[key] !== void 0) { log.debug(`Denied attempt to modify a secure key ${key}`, options[key]); delete options[key]; } }); Object.keys(options).forEach((key) => { if (key.indexOf("__") === 0) { delete options[key]; } }); Object.keys(options).forEach((key) => { if (typeof options[key] === "string" && (options[key].includes("<") || options[key].includes(">") || options[key].includes("url(data:"))) { delete options[key]; } if (typeof options[key] === "object") { sanitize(options[key]); } }); }; const addDirective = (directive) => { if (directive.fontFamily) { if (!directive.themeVariables) { directive.themeVariables = { fontFamily: directive.fontFamily }; } else { if (!directive.themeVariables.fontFamily) { directive.themeVariables = { fontFamily: directive.fontFamily }; } } } directives.push(directive); updateCurrentConfig(siteConfig, directives); }; const reset = (config2 = siteConfig) => { directives = []; updateCurrentConfig(config2, directives); }; var ConfigWarning = /* @__PURE__ */ ((ConfigWarning2) => { ConfigWarning2["LAZY_LOAD_DEPRECATED"] = "The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead."; return ConfigWarning2; })(ConfigWarning || {}); const issuedWarnings = {}; const issueWarning = (warning) => { if (issuedWarnings[warning]) { return; } log.warn(ConfigWarning[warning]); issuedWarnings[warning] = true; }; const checkConfig = (config2) => { if (!config2) { return; } if (config2.lazyLoadedDiagrams || config2.loadExternalDiagramsAtStartup) { issueWarning("LAZY_LOAD_DEPRECATED"); } }; let title = ""; let diagramTitle = ""; let description = ""; const sanitizeText = (txt) => sanitizeText$1(txt, getConfig()); const clear = function() { title = ""; description = ""; diagramTitle = ""; }; const setAccTitle = function(txt) { title = sanitizeText(txt).replace(/^\s+/g, ""); }; const getAccTitle = function() { return title || diagramTitle; }; const setAccDescription = function(txt) { description = sanitizeText(txt).replace(/\n\s+/g, "\n"); }; const getAccDescription = function() { return description; }; const setDiagramTitle = function(txt) { diagramTitle = sanitizeText(txt); }; const getDiagramTitle = function() { return diagramTitle; }; const commonDb = { getAccTitle, setAccTitle, getDiagramTitle, setDiagramTitle, getAccDescription, setAccDescription, clear }; const commonDb$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, clear, default: commonDb, getAccDescription, getAccTitle, getDiagramTitle, setAccDescription, setAccTitle, setDiagramTitle }, Symbol.toStringTag, { value: "Module" })); export { addDirective as a, sanitizeText$1 as b, commonDb$1 as c, assignWithDepth$1 as d, common as e, configKeys as f, getConfig as g, setConfig as h, getSiteConfig as i, defaultConfig as j, evaluate as k, log as l, saveConfigFromInitialize as m, setSiteConfig as n, setAccTitle as o, getAccTitle as p, getAccDescription as q, reset as r, setLogLevel as s, theme as t, updateSiteConfig as u, setAccDescription as v, setDiagramTitle as w, getDiagramTitle as x, clear as y, parseGenericTypes as z }; //# sourceMappingURL=commonDb-573409be.js.map