From 0d5246fbc730bf15463d7183fe4400a1e2fc492c Mon Sep 17 00:00:00 2001 From: ashishj Date: Wed, 23 Nov 2022 19:28:26 +0100 Subject: [PATCH 01/26] initial commit --- .vite/build.ts | 18 + .vite/server.ts | 1 + Setup.md | 1755 +++++++++++++++++ cypress/platform/ashish2.html | 162 ++ cypress/platform/class.html | 10 +- demos/timeline.html | 38 + .../src/mermaidUtils.ts | 9 +- packages/mermaid-mindmap/src/mermaidUtils.ts | 5 +- .../mermaid-mindmap/src/mindmapRenderer.js | 10 +- packages/mermaid-timeline/package.json | 69 + packages/mermaid-timeline/src/detector.ts | 20 + .../src/diagram-definition.ts | 14 + packages/mermaid-timeline/src/mermaidUtils.ts | 70 + .../src/parser/timeline.jison | 106 + .../src/parser/timeline.spec.js | 150 ++ packages/mermaid-timeline/src/styles.js | 78 + packages/mermaid-timeline/src/svgDraw.js | 604 ++++++ packages/mermaid-timeline/src/timelineDb.js | 100 + .../mermaid-timeline/src/timelineDb.spec.js | 91 + .../mermaid-timeline/src/timelineRenderer.ts | 415 ++++ .../mermaid-timeline/src/types/index.d.ts | 7 + packages/mermaid-timeline/tsconfig.json | 10 + packages/mermaid/src/config.type.ts | 24 + packages/mermaid/src/defaultConfig.ts | 149 ++ .../mermaid/src/diagram-api/diagramAPI.ts | 5 +- packages/mermaid/src/diagram-api/types.ts | 4 +- pnpm-lock.yaml | 24 +- 27 files changed, 3928 insertions(+), 20 deletions(-) create mode 100644 Setup.md create mode 100644 cypress/platform/ashish2.html create mode 100644 demos/timeline.html create mode 100644 packages/mermaid-timeline/package.json create mode 100644 packages/mermaid-timeline/src/detector.ts create mode 100644 packages/mermaid-timeline/src/diagram-definition.ts create mode 100644 packages/mermaid-timeline/src/mermaidUtils.ts create mode 100644 packages/mermaid-timeline/src/parser/timeline.jison create mode 100644 packages/mermaid-timeline/src/parser/timeline.spec.js create mode 100644 packages/mermaid-timeline/src/styles.js create mode 100644 packages/mermaid-timeline/src/svgDraw.js create mode 100644 packages/mermaid-timeline/src/timelineDb.js create mode 100644 packages/mermaid-timeline/src/timelineDb.spec.js create mode 100644 packages/mermaid-timeline/src/timelineRenderer.ts create mode 100644 packages/mermaid-timeline/src/types/index.d.ts create mode 100644 packages/mermaid-timeline/tsconfig.json diff --git a/.vite/build.ts b/.vite/build.ts index 1be46ad5a..1e9f12a41 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -41,6 +41,21 @@ const packageOptions = { packageName: 'mermaid-mindmap', file: 'detector.ts', }, + 'mermaid-timeline': { + name: 'mermaid-timeline', + packageName: 'mermaid-timeline', + file: 'diagram-definition.ts', + }, + // 'mermaid-timeline-detector': { + // name: 'mermaid-timeline-detector', + // packageName: 'mermaid-timeline', + // file: 'detector.ts', + // }, + // 'mermaid-example-diagram': { + // name: 'mermaid-example-diagram', + // packageName: 'mermaid-example-diagram', + // file: 'diagram-definition.ts', + // }, // 'mermaid-example-diagram-detector': { // name: 'mermaid-example-diagram-detector', // packageName: 'mermaid-example-diagram', @@ -123,6 +138,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) 'packages/mermaid-mindmap/src/**', 'packages/mermaid/src/**', // 'packages/mermaid-example-diagram/src/**', + 'packages/mermaid-timeline/src/**', ], }; } @@ -150,6 +166,8 @@ if (watch) { if (!mermaidOnly) { build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline' })); + //build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline-detector' })); } } else if (visualize) { await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' })); diff --git a/.vite/server.ts b/.vite/server.ts index 334398dd8..eb72a93d9 100644 --- a/.vite/server.ts +++ b/.vite/server.ts @@ -24,6 +24,7 @@ async function createServer() { app.use(express.static('./packages/mermaid/dist')); app.use(express.static('./packages/mermaid-example-diagram/dist')); app.use(express.static('./packages/mermaid-mindmap/dist')); + app.use(express.static('./packages/mermaid-timeline/dist')); app.use(vite.middlewares); app.use(express.static('demos')); app.use(express.static('cypress/platform')); diff --git a/Setup.md b/Setup.md new file mode 100644 index 000000000..4d09fcfca --- /dev/null +++ b/Setup.md @@ -0,0 +1,1755 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs. + + + +## mermaidAPI + +This is the API to be used when optionally handling the integration with the web page, instead of +using the default integration provided by mermaid.js. + +The core of this api is the [**render**][1] function which, given a graph +definition as text, renders the graph/diagram and returns an svg element for the graph. + +It is then up to the user of the API to make use of the svg, either insert it somewhere in the +page or do something completely different. + +In addition to the render function, a number of behavioral configuration options are available. + +## Configuration + +**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click +here][2]].** + +## **What follows are config instructions for older versions** + +These are the default options which can be overridden with the initialization call like so: + +**Example 1:**
 mermaid.initialize({ flowchart:{ htmlLabels: false } });
+ +**Example 2:**
+ +A summary of all options and their defaults is found [here][3]. +A description of each option follows below. + +## theme + +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".
 "theme": "forest",
+"themeCSS": ".node rect { fill: red; }"
+ +## fontFamily + +| 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;'. + +## logLevel + +| 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) + +## securityLevel + +| 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. + +## startOnLoad + +| Parameter | Description | Type | Required | Values | +| ----------- | -------------------------------------------- | ------- | -------- | ----------- | +| startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false | + +**Notes:** Default value: true + +## arrowMarkerAbsolute + +| 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 + +## secure + +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'] + +## deterministicIds + +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 behaviour. + +**Notes**: + +This matters if your files are checked into sourcecontrol e.g. git and should not change unless +content is changed. + +Default value: false + +## deterministicIDSeed + +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. + +## flowchart + +The object containing configurations specific for flowcharts + +### diagramPadding + +| 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 + +### htmlLabels + +| 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. + +### nodeSpacing + +| 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 + +### rankSpacing + +| 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 + +### curve + +| Parameter | Description | Type | Required | Values | +| --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- | +| curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' | + +**Notes:** + +Default Value: 'basis' + +### useMaxWidth + +| 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 + +### defaultRenderer + +| 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-wrapper' + +## sequence + +The object containing configurations specific for sequence diagrams + +### activationWidth + +| Parameter | Description | Type | Required | Values | +| --------------- | ---------------------------- | ------- | -------- | ------------------ | +| activationWidth | Width of the activation rect | Integer | Required | Any Positive Value | + +**Notes:** Default value :10 + +### diagramMarginX + +| 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 + +### diagramMarginY + +| Parameter | Description | Type | Required | Values | +| -------------- | ------------------------------------------------- | ------- | -------- | ------------------ | +| diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value | + +**Notes:** Default value: 10 + +### actorMargin + +| Parameter | Description | Type | Required | Values | +| ----------- | --------------------- | ------- | -------- | ------------------ | +| actorMargin | Margin between actors | Integer | Required | Any Positive Value | + +**Notes:** Default value: 50 + +### width + +| Parameter | Description | Type | Required | Values | +| --------- | -------------------- | ------- | -------- | ------------------ | +| width | Width of actor boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 150 + +### height + +| Parameter | Description | Type | Required | Values | +| --------- | --------------------- | ------- | -------- | ------------------ | +| height | Height of actor boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 65 + +### boxMargin + +| Parameter | Description | Type | Required | Values | +| --------- | ------------------------ | ------- | -------- | ------------------ | +| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 10 + +### boxTextMargin + +| Parameter | Description | Type | Required | Values | +| ------------- | -------------------------------------------- | ------- | -------- | ------------------ | +| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 5 + +### noteMargin + +| Parameter | Description | Type | Required | Values | +| ---------- | ------------------- | ------- | -------- | ------------------ | +| noteMargin | margin around notes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 10 + +### messageMargin + +| Parameter | Description | Type | Required | Values | +| ------------- | ---------------------- | ------- | -------- | ------------------ | +| messageMargin | Space between messages | Integer | Required | Any Positive Value | + +**Notes:** Default value: 35 + +### messageAlign + +| Parameter | Description | Type | Required | Values | +| ------------ | --------------------------- | ------ | -------- | ------------------------- | +| messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' | + +**Notes:** Default value: 'center' + +### mirrorActors + +| Parameter | Description | Type | Required | Values | +| ------------ | --------------------------- | ------- | -------- | ----------- | +| mirrorActors | Mirror actors under diagram | boolean | Required | true, false | + +**Notes:** Default value: true + +### forceMenus + +| 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. + +### bottomMarginAdj + +| 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 + +### useMaxWidth + +| 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 + +### rightAngles + +| 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 + +### showSequenceNumbers + +| Parameter | Description | Type | Required | Values | +| ------------------- | ------------------------------- | ------- | -------- | ----------- | +| showSequenceNumbers | This will show the node numbers | boolean | Required | true, false | + +**Notes:** Default value: false + +### actorFontSize + +| 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**.. + +### actorFontFamily + +| 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' + +### actorFontWeight + +This sets the font weight of the actor's description + +**Notes:** Default value: 400. + +### noteFontSize + +| Parameter | Description | Type | Required | Values | +| ------------ | ----------------------------------------------- | ------- | -------- | ------------------ | +| noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 14 + +### noteFontFamily + +| 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' + +### noteFontWeight + +This sets the font weight of the note's description + +**Notes:** Default value: 400 + +### noteAlign + +| Parameter | Description | Type | Required | Values | +| --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- | +| noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' | + +**Notes:** Default value: 'center' + +### messageFontSize + +| Parameter | Description | Type | Required | Values | +| --------------- | ----------------------------------------- | ------- | -------- | ------------------- | +| messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number | + +**Notes:** Default value: 16 + +### messageFontFamily + +| 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' + +### messageFontWeight + +This sets the font weight of the message's description + +**Notes:** Default value: 400. + +### wrap + +This sets the auto-wrap state for the diagram + +**Notes:** Default value: false. + +### wrapPadding + +This sets the auto-wrap padding for the diagram (sides only) + +**Notes:** Default value: 0. + +### labelBoxWidth + +This sets the width of the loop-box (loop, alt, opt, par) + +**Notes:** Default value: 50. + +### labelBoxHeight + +This sets the height of the loop-box (loop, alt, opt, par) + +**Notes:** Default value: 20. + +## gantt + +The object containing configurations specific for gantt diagrams + +### titleTopMargin + +### 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 + +### barHeight + +| Parameter | Description | Type | Required | Values | +| --------- | ----------------------------------- | ------- | -------- | ------------------ | +| barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value | + +**Notes:** Default value: 20 + +### barGap + +| 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 + +### topPadding + +| 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 + +### rightPadding + +| 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 + +### leftPadding + +| 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 + +### gridLineStartPadding + +| Parameter | Description | Type | Required | Values | +| -------------------- | -------------------------------------------- | ------- | -------- | ------------------ | +| gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value | + +**Notes:** Default value: 35 + +### fontSize + +| Parameter | Description | Type | Required | Values | +| --------- | ----------- | ------- | -------- | ------------------ | +| fontSize | Font size | Integer | Required | Any Positive Value | + +**Notes:** Default value: 11 + +### sectionFontSize + +| Parameter | Description | Type | Required | Values | +| --------------- | ---------------------- | ------- | -------- | ------------------ | +| sectionFontSize | Font size for sections | Integer | Required | Any Positive Value | + +**Notes:** Default value: 11 + +### numberSectionStyles + +| Parameter | Description | Type | Required | Values | +| ------------------- | ---------------------------------------- | ------- | -------- | ------------------ | +| numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value | + +**Notes:** Default value: 4 + +### axisFormat + +| Parameter | Description | Type | Required | Values | +| ---------- | --------------------------- | ---- | -------- | ---------------- | +| axisFormat | Datetime 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'. + +### useMaxWidth + +| 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 + +### topAxis + +| 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**. + +## journey + +The object containing configurations specific for journey diagrams + +### diagramMarginX + +| 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 + +### diagramMarginY + +| Parameter | Description | Type | Required | Values | +| -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | +| diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | + +**Notes:** Default value: 10 + +### leftMargin + +| Parameter | Description | Type | Required | Values | +| ----------- | --------------------- | ------- | -------- | ------------------ | +| actorMargin | Margin between actors | Integer | Required | Any Positive Value | + +**Notes:** Default value: 50 + +### width + +| Parameter | Description | Type | Required | Values | +| --------- | -------------------- | ------- | -------- | ------------------ | +| width | Width of actor boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 150 + +### height + +| Parameter | Description | Type | Required | Values | +| --------- | --------------------- | ------- | -------- | ------------------ | +| height | Height of actor boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 65 + +### boxMargin + +| Parameter | Description | Type | Required | Values | +| --------- | ------------------------ | ------- | -------- | ------------------ | +| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 10 + +### boxTextMargin + +| Parameter | Description | Type | Required | Values | +| ------------- | -------------------------------------------- | ------- | -------- | ------------------ | +| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 5 + +### noteMargin + +| Parameter | Description | Type | Required | Values | +| ---------- | ------------------- | ------- | -------- | ------------------ | +| noteMargin | Margin around notes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 10 + +### messageMargin + +| Parameter | Description | Type | Required | Values | +| ------------- | ----------------------- | ------- | -------- | ------------------ | +| messageMargin | Space between messages. | Integer | Required | Any Positive Value | + +**Notes:** + +Space between messages. + +Default value: 35 + +### messageAlign + +| Parameter | Description | Type | Required | Values | +| ------------ | --------------------------- | ---- | -------- | ------------------------- | +| messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | + +**Notes:** Default value: 'center' + +### bottomMarginAdj + +| 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 + +### useMaxWidth + +| 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 + +### rightAngles + +| 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 + +## timeline + +The object containing configurations specific for timeline diagrams + +### diagramMarginX + +| 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 + +### diagramMarginY + +| Parameter | Description | Type | Required | Values | +| -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | +| diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | + +**Notes:** Default value: 10 + +### leftMargin + +| Parameter | Description | Type | Required | Values | +| ----------- | --------------------- | ------- | -------- | ------------------ | +| actorMargin | Margin between actors | Integer | Required | Any Positive Value | + +**Notes:** Default value: 50 + +### width + +| Parameter | Description | Type | Required | Values | +| --------- | -------------------- | ------- | -------- | ------------------ | +| width | Width of actor boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 150 + +### height + +| Parameter | Description | Type | Required | Values | +| --------- | --------------------- | ------- | -------- | ------------------ | +| height | Height of actor boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 65 + +### boxMargin + +| Parameter | Description | Type | Required | Values | +| --------- | ------------------------ | ------- | -------- | ------------------ | +| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 10 + +### boxTextMargin + +| Parameter | Description | Type | Required | Values | +| ------------- | -------------------------------------------- | ------- | -------- | ------------------ | +| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 5 + +### noteMargin + +| Parameter | Description | Type | Required | Values | +| ---------- | ------------------- | ------- | -------- | ------------------ | +| noteMargin | Margin around notes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 10 + +### messageMargin + +| Parameter | Description | Type | Required | Values | +| ------------- | ----------------------- | ------- | -------- | ------------------ | +| messageMargin | Space between messages. | Integer | Required | Any Positive Value | + +**Notes:** + +Space between messages. + +Default value: 35 + +### messageAlign + +| Parameter | Description | Type | Required | Values | +| ------------ | --------------------------- | ---- | -------- | ------------------------- | +| messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | + +**Notes:** Default value: 'center' + +### bottomMarginAdj + +| 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 + +### useMaxWidth + +| 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 + +### rightAngles + +| 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 + +## useMaxWidth + +| 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 + +## defaultRenderer + +| 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' + +## useMaxWidth + +| 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 + +## defaultRenderer + +| 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' + +## er + +The object containing configurations specific for entity relationship diagrams + +### diagramPadding + +| 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 + +### layoutDirection + +| 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' + +### minEntityWidth + +| 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 + +### minEntityHeight + +| 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 + +### entityPadding + +| 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 + +### stroke + +| Parameter | Description | Type | Required | Values | +| --------- | ----------------------------------- | ------ | -------- | -------------------- | +| stroke | Stroke color of box edges and lines | string | 4 | Any recognized color | + +**Notes:** Default value: 'gray' + +### fill + +| Parameter | Description | Type | Required | Values | +| --------- | -------------------------- | ------ | -------- | -------------------- | +| fill | Fill color of entity boxes | string | 4 | Any recognized color | + +**Notes:** Default value: 'honeydew' + +### fontSize + +| 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 + +### useMaxWidth + +| 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 + +## pie + +The object containing configurations specific for pie diagrams + +### useMaxWidth + +| 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 + +## requirement + +The object containing configurations specific for req diagrams + +### useMaxWidth + +| 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 + +## c4 + +The object containing configurations specific for c4 diagrams + +### diagramMarginX + +| 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 + +### diagramMarginY + +| Parameter | Description | Type | Required | Values | +| -------------- | ------------------------------------------- | ------- | -------- | ------------------ | +| diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value | + +**Notes:** Default value: 10 + +### c4ShapeMargin + +| Parameter | Description | Type | Required | Values | +| ------------- | --------------------- | ------- | -------- | ------------------ | +| c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 50 + +### c4ShapePadding + +| Parameter | Description | Type | Required | Values | +| -------------- | ---------------------- | ------- | -------- | ------------------ | +| c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 20 + +### width + +| Parameter | Description | Type | Required | Values | +| --------- | --------------------- | ------- | -------- | ------------------ | +| width | Width of person boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 216 + +### height + +| Parameter | Description | Type | Required | Values | +| --------- | ---------------------- | ------- | -------- | ------------------ | +| height | Height of person boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 60 + +### boxMargin + +| Parameter | Description | Type | Required | Values | +| --------- | ------------------- | ------- | -------- | ------------------ | +| boxMargin | Margin around boxes | Integer | Required | Any Positive Value | + +**Notes:** Default value: 10 + +### useMaxWidth + +| 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 + +### c4ShapeInRow + +| 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 + +### c4BoundaryInRow + +| Parameter | Description | Type | Required | Values | +| --------------- | ----------- | ------- | -------- | ------------------ | +| c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value | + +**Notes:** How many boundarys to place in each row. + +Default value: 2 + +### personFontSize + +This sets the font size of Person shape for the diagram + +**Notes:** Default value: 14. + +### personFontFamily + +This sets the font family of Person shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### personFontWeight + +This sets the font weight of Person shape for the diagram + +**Notes:** Default value: normal. + +### external_personFontSize + +This sets the font size of External Person shape for the diagram + +**Notes:** Default value: 14. + +### external_personFontFamily + +This sets the font family of External Person shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### external_personFontWeight + +This sets the font weight of External Person shape for the diagram + +**Notes:** Default value: normal. + +### systemFontSize + +This sets the font size of System shape for the diagram + +**Notes:** Default value: 14. + +### systemFontFamily + +This sets the font family of System shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### systemFontWeight + +This sets the font weight of System shape for the diagram + +**Notes:** Default value: normal. + +### external_systemFontSize + +This sets the font size of External System shape for the diagram + +**Notes:** Default value: 14. + +### external_systemFontFamily + +This sets the font family of External System shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### external_systemFontWeight + +This sets the font weight of External System shape for the diagram + +**Notes:** Default value: normal. + +### system_dbFontSize + +This sets the font size of System DB shape for the diagram + +**Notes:** Default value: 14. + +### system_dbFontFamily + +This sets the font family of System DB shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### system_dbFontWeight + +This sets the font weight of System DB shape for the diagram + +**Notes:** Default value: normal. + +### external_system_dbFontSize + +This sets the font size of External System DB shape for the diagram + +**Notes:** Default value: 14. + +### external_system_dbFontFamily + +This sets the font family of External System DB shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### external_system_dbFontWeight + +This sets the font weight of External System DB shape for the diagram + +**Notes:** Default value: normal. + +### system_queueFontSize + +This sets the font size of System Queue shape for the diagram + +**Notes:** Default value: 14. + +### system_queueFontFamily + +This sets the font family of System Queue shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### system_queueFontWeight + +This sets the font weight of System Queue shape for the diagram + +**Notes:** Default value: normal. + +### external_system_queueFontSize + +This sets the font size of External System Queue shape for the diagram + +**Notes:** Default value: 14. + +### external_system_queueFontFamily + +This sets the font family of External System Queue shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### external_system_queueFontWeight + +This sets the font weight of External System Queue shape for the diagram + +**Notes:** Default value: normal. + +### boundaryFontSize + +This sets the font size of Boundary shape for the diagram + +**Notes:** Default value: 14. + +### boundaryFontFamily + +This sets the font family of Boundary shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### boundaryFontWeight + +This sets the font weight of Boundary shape for the diagram + +**Notes:** Default value: normal. + +### messageFontSize + +This sets the font size of Message shape for the diagram + +**Notes:** Default value: 12. + +### messageFontFamily + +This sets the font family of Message shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### messageFontWeight + +This sets the font weight of Message shape for the diagram + +**Notes:** Default value: normal. + +### containerFontSize + +This sets the font size of Container shape for the diagram + +**Notes:** Default value: 14. + +### containerFontFamily + +This sets the font family of Container shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### containerFontWeight + +This sets the font weight of Container shape for the diagram + +**Notes:** Default value: normal. + +### external_containerFontSize + +This sets the font size of External Container shape for the diagram + +**Notes:** Default value: 14. + +### external_containerFontFamily + +This sets the font family of External Container shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### external_containerFontWeight + +This sets the font weight of External Container shape for the diagram + +**Notes:** Default value: normal. + +### container_dbFontSize + +This sets the font size of Container DB shape for the diagram + +**Notes:** Default value: 14. + +### container_dbFontFamily + +This sets the font family of Container DB shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### container_dbFontWeight + +This sets the font weight of Container DB shape for the diagram + +**Notes:** Default value: normal. + +### external_container_dbFontSize + +This sets the font size of External Container DB shape for the diagram + +**Notes:** Default value: 14. + +### external_container_dbFontFamily + +This sets the font family of External Container DB shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### external_container_dbFontWeight + +This sets the font weight of External Container DB shape for the diagram + +**Notes:** Default value: normal. + +### container_queueFontSize + +This sets the font size of Container Queue shape for the diagram + +**Notes:** Default value: 14. + +### container_queueFontFamily + +This sets the font family of Container Queue shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### container_queueFontWeight + +This sets the font weight of Container Queue shape for the diagram + +**Notes:** Default value: normal. + +### external_container_queueFontSize + +This sets the font size of External Container Queue shape for the diagram + +**Notes:** Default value: 14. + +### external_container_queueFontFamily + +This sets the font family of External Container Queue shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### external_container_queueFontWeight + +This sets the font weight of External Container Queue shape for the diagram + +**Notes:** Default value: normal. + +### componentFontSize + +This sets the font size of Component shape for the diagram + +**Notes:** Default value: 14. + +### componentFontFamily + +This sets the font family of Component shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### componentFontWeight + +This sets the font weight of Component shape for the diagram + +**Notes:** Default value: normal. + +### external_componentFontSize + +This sets the font size of External Component shape for the diagram + +**Notes:** Default value: 14. + +### external_componentFontFamily + +This sets the font family of External Component shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### external_componentFontWeight + +This sets the font weight of External Component shape for the diagram + +**Notes:** Default value: normal. + +### component_dbFontSize + +This sets the font size of Component DB shape for the diagram + +**Notes:** Default value: 14. + +### component_dbFontFamily + +This sets the font family of Component DB shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### component_dbFontWeight + +This sets the font weight of Component DB shape for the diagram + +**Notes:** Default value: normal. + +### external_component_dbFontSize + +This sets the font size of External Component DB shape for the diagram + +**Notes:** Default value: 14. + +### external_component_dbFontFamily + +This sets the font family of External Component DB shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### external_component_dbFontWeight + +This sets the font weight of External Component DB shape for the diagram + +**Notes:** Default value: normal. + +### component_queueFontSize + +This sets the font size of Component Queue shape for the diagram + +**Notes:** Default value: 14. + +### component_queueFontFamily + +This sets the font family of Component Queue shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### component_queueFontWeight + +This sets the font weight of Component Queue shape for the diagram + +**Notes:** Default value: normal. + +### external_component_queueFontSize + +This sets the font size of External Component Queue shape for the diagram + +**Notes:** Default value: 14. + +### external_component_queueFontFamily + +This sets the font family of External Component Queue shape for the diagram + +**Notes:** Default value: "Open Sans", sans-serif. + +### external_component_queueFontWeight + +This sets the font weight of External Component Queue shape for the diagram + +**Notes:** Default value: normal. + +### wrap + +This sets the auto-wrap state for the diagram + +**Notes:** Default value: true. + +### wrapPadding + +This sets the auto-wrap padding for the diagram (sides only) + +**Notes:** Default value: 0. + +## parse + +### Parameters + +- `text` **[string][4]** +- `parseError` **[Function][5]?** + +Returns **[boolean][6]** + +## setSiteConfig + +## setSiteConfig + +| Function | Description | Type | Values | +| ------------- | ------------------------------------- | ----------- | --------------------------------------- | +| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | + +**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls +to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) +will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this +function _Default value: At default, will mirror Global Config_ + +### Parameters + +- `conf` **MermaidConfig** The base currentConfig to use as siteConfig + +Returns **[object][7]** The siteConfig + +## getSiteConfig + +## getSiteConfig + +| Function | Description | Type | Values | +| ------------- | ------------------------------------------------- | ----------- | -------------------------------- | +| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig | + +**Notes**: Returns **any** values in siteConfig. + +Returns **[object][7]** The siteConfig + +## setConfig + +## setConfig + +| Function | Description | Type | Values | +| ------------- | ------------------------------------- | ----------- | --------------------------------------- | +| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | + +**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure +keys. Any values found in conf with key found in siteConfig.secure will be replaced with the +corresponding siteConfig value. + +### Parameters + +- `conf` **any** The potential currentConfig + +Returns **any** The currentConfig merged with the sanitized conf + +## render + +Function that renders an svg with a graph from a chart definition. Usage example below. + +```javascript +mermaidAPI.initialize({ + startOnLoad: true, +}); +$(function () { + const graphDefinition = 'graph TB\na-->b'; + const cb = function (svgGraph) { + console.log(svgGraph); + }; + mermaidAPI.render('id1', graphDefinition, cb); +}); +``` + +### Parameters + +- `id` **[string][4]** The id of the element to be rendered +- `text` **[string][4]** The graph definition +- `cb` **function (svgCode: [string][4], bindFunctions: function (element: [Element][8]): void): void** +- `container` **[Element][8]** Selector to element in which a div with the graph temporarily will be + inserted. If one is provided a hidden div will be inserted in the body of the page instead. The + element will be removed when rendering is completed. + +Returns **void** + +## getConfig + +## getConfig + +| Function | Description | Type | Return Values | +| --------- | ------------------------- | ----------- | ------------------------------ | +| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config | + +**Notes**: Returns **any** the currentConfig + +Returns **any** The currentConfig + +## sanitize + +## sanitize + +| Function | Description | Type | Values | +| -------- | -------------------------------------- | ----------- | ------ | +| sanitize | Sets the siteConfig to desired values. | Put Request | None | + +Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies +options in-place + +### Parameters + +- `options` **any** The potential setConfig parameter + +## addDirective + +Pushes in a directive to the configuration + +### Parameters + +- `directive` **[object][7]** The directive to push in + +## reset + +## reset + +| Function | Description | Type | Required | Values | +| -------- | ---------------------------- | ----------- | -------- | ------ | +| reset | Resets currentConfig to conf | Put Request | Required | None | + +## conf + +| Parameter | Description | Type | Required | Values | +| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- | +| conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array | + +**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`) + +### Parameters + +- `config` (optional, default `siteConfig`) + +Returns **void** + +## initialize + +### Parameters + +- `options` **MermaidConfig** + +## + +## mermaidAPI configuration defaults + +```html + +``` + +[1]: Setup.md?id=render +[2]: 8.6.0_docs.md +[3]: #mermaidapi-configuration-defaults +[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String +[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function +[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean +[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object +[8]: https://developer.mozilla.org/docs/Web/API/Element diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html new file mode 100644 index 000000000..e10ea6a2d --- /dev/null +++ b/cypress/platform/ashish2.html @@ -0,0 +1,162 @@ + + + + + + + + + + +
Security check
+ 
+flowchart TD
+    A --> B
+    B --> C
+    A --> C
+
+ 
+classDiagram
+        direction LR
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+ 
+ timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008s : Instagram
+          2010 : Pinterest
+
+ 
+mindmap
+  root
+    child1((Circle))
+        grandchild 1
+        grandchild 2
+    child2(Round rectangle)
+        grandchild 3
+        grandchild 4
+    child3[Square]
+        grandchild 5
+        ::icon(mdi mdi-fire)
+        gc6((grand
child 6))
+        ::icon(mdi mdi-fire)
+          gc7((grand
grand
child 8))
+
+ 
+      gantt
+        title Style today marker (vertical line should be 5px wide and half-transparent blue)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+        section Section1
+        Today: 1, -1h
+
+ + + + + + + + diff --git a/cypress/platform/class.html b/cypress/platform/class.html index 85fae2a77..1d72c34a5 100644 --- a/cypress/platform/class.html +++ b/cypress/platform/class.html @@ -46,13 +46,9 @@ 
       %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
       classDiagram-v2
-       class BankAccount{
-        +String owner
-        +BigDecimal balance
-        +deposit(amount) bool
-        +withdrawl(amount) int
-       }
-       cssClass "BankAccount" customCss
+classA <|-- classB : implements
+classC *-- classD : composition
+classE o-- classF : aggregation
     
         %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
diff --git a/demos/timeline.html b/demos/timeline.html
new file mode 100644
index 000000000..f90f37675
--- /dev/null
+++ b/demos/timeline.html
@@ -0,0 +1,38 @@
+
+
+  
+    
+    
+    Mermaid Quick Test Page
+    
+    
+  
+
+  
+    
+        timeline
+        title My day
+        section Go to work
+          1930 : first step : second step
+               : third step
+          1940 : fourth step : fifth step
+				

+
+    
+    
+  
+
diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts
index 8894abdff..698203f19 100644
--- a/packages/mermaid-example-diagram/src/mermaidUtils.ts
+++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts
@@ -22,6 +22,7 @@ export const log: Record = {
 export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
 export let getConfig: () => object;
 export let sanitizeText: (str: string) => string;
+export let commonDb: any;
 /**
  * Placeholder for the real function that will be injected by mermaid.
  */
@@ -41,15 +42,17 @@ export let setupGraphViewbox: (
  * @param _getConfig - getConfig from mermaid/src/diagramAPI.ts
  * @param _sanitizeText - sanitizeText from mermaid/src/diagramAPI.ts
  * @param _setupGraphViewbox - setupGraphViewbox from mermaid/src/diagramAPI.ts
+ * @param _commonDb
  */
 export const injectUtils = (
   _log: Record,
   _setLogLevel: typeof setLogLevel,
   _getConfig: typeof getConfig,
   _sanitizeText: typeof sanitizeText,
-  _setupGraphViewbox: typeof setupGraphViewbox
+  _setupGraphViewbox: typeof setupGraphViewbox,
+  _commonDb: any
 ) => {
-  _log.debug('Mermaid utils injected into example-diagram');
+  _log.info('Mermaid utils injected into timeline-diagram');
   log.trace = _log.trace;
   log.debug = _log.debug;
   log.info = _log.info;
@@ -60,4 +63,6 @@ export const injectUtils = (
   getConfig = _getConfig;
   sanitizeText = _sanitizeText;
   setupGraphViewbox = _setupGraphViewbox;
+  commonDb = _commonDb;
+
 };
diff --git a/packages/mermaid-mindmap/src/mermaidUtils.ts b/packages/mermaid-mindmap/src/mermaidUtils.ts
index 7d8ac38bf..4834b936d 100644
--- a/packages/mermaid-mindmap/src/mermaidUtils.ts
+++ b/packages/mermaid-mindmap/src/mermaidUtils.ts
@@ -26,6 +26,7 @@ export const log: Record = {
 export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
 export let getConfig: () => object;
 export let sanitizeText: (str: string) => string;
+export let commonDb: () => object;
 // eslint-disable @typescript-eslint/no-explicit-any
 export let setupGraphViewbox: (
   graph: any,
@@ -39,7 +40,8 @@ export const injectUtils = (
   _setLogLevel: any,
   _getConfig: any,
   _sanitizeText: any,
-  _setupGraphViewbox: any
+  _setupGraphViewbox: any,
+  _commonDb: any
 ) => {
   _log.info('Mermaid utils injected');
   log.trace = _log.trace;
@@ -52,4 +54,5 @@ export const injectUtils = (
   getConfig = _getConfig;
   sanitizeText = _sanitizeText;
   setupGraphViewbox = _setupGraphViewbox;
+  commonDb= _commonDb;
 };
diff --git a/packages/mermaid-mindmap/src/mindmapRenderer.js b/packages/mermaid-mindmap/src/mindmapRenderer.js
index 9fd557e51..17f2d0097 100644
--- a/packages/mermaid-mindmap/src/mindmapRenderer.js
+++ b/packages/mermaid-mindmap/src/mindmapRenderer.js
@@ -11,7 +11,7 @@ cytoscape.use(coseBilkent);
 
 /**
  * @param {any} svg The svg element to draw the diagram onto
- * @param {object} mindmap The mindmap data and hierarchy
+ * @param {object} mindmap The maindmap data and hierarchy
  * @param section
  * @param {object} conf The configuration object
  */
@@ -89,6 +89,7 @@ function addNodes(mindmap, cy, conf, level) {
 /**
  * @param node
  * @param conf
+ * @param cy
  */
 function layoutMindmap(node, conf) {
   return new Promise((resolve) => {
@@ -109,7 +110,7 @@ function layoutMindmap(node, conf) {
     renderEl.remove();
     addNodes(node, cy, conf, 0);
 
-    // Make cytoscape care about the dimensions of the nodes
+    // Make cytoscape care about the dimensisions of the nodes
     cy.nodes().forEach(function (n) {
       n.layoutDimensions = () => {
         const data = n.data();
@@ -131,7 +132,10 @@ function layoutMindmap(node, conf) {
   });
 }
 /**
+ * @param node
  * @param cy
+ * @param positionedMindmap
+ * @param conf
  */
 function positionNodes(cy) {
   cy.nodes().map((node, id) => {
@@ -169,7 +173,7 @@ export const draw = async (text, id, version, diagObj) => {
   log.debug('Renering info diagram\n' + text);
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and Document for when rendering in sandbox mode
+  // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
diff --git a/packages/mermaid-timeline/package.json b/packages/mermaid-timeline/package.json
new file mode 100644
index 000000000..0c2ebf136
--- /dev/null
+++ b/packages/mermaid-timeline/package.json
@@ -0,0 +1,69 @@
+{
+  "name": "@mermaid-js/mermaid-timeline",
+  "version": "9.2.0-rc2",
+  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
+  "main": "dist/mermaid-timeline.core.mjs",
+  "module": "dist/mermaid-timeline.core.mjs",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/mermaid-timeline.min.js",
+      "import": "./dist/mermaid-timeline.core.mjs"
+    },
+    "./*": "./*"
+  },
+  "keywords": [
+    "diagram",
+    "markdown",
+    "timeline",
+    "mermaid"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:watch": "yarn build:code --watch",
+    "build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"",
+    "build": "yarn clean; yarn build:esbuild",
+    "dev": "node .esbuild/serve.cjs",
+    "release": "yarn build",
+    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
+    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
+    "lint:jison": "ts-node-esm src/jison/lint.mts",
+    "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
+    "todo-pre-commit": "lint-staged"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mermaid-js/mermaid"
+  },
+  "author": "Knut Sveidqvist",
+  "license": "MIT",
+  "standard": {
+    "ignore": [
+      "**/parser/*.js",
+      "dist/**/*.js",
+      "cypress/**/*.js"
+    ],
+    "globals": [
+      "page"
+    ]
+  },
+  "dependencies": {
+    "d3": "^7.0.0",
+    "khroma": "^2.0.0"
+  },
+  "devDependencies": {
+    "concurrently": "^7.4.0",
+    "rimraf": "^3.0.2"
+  },
+  "resolutions": {
+    "d3": "^7.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ]
+}
\ No newline at end of file
diff --git a/packages/mermaid-timeline/src/detector.ts b/packages/mermaid-timeline/src/detector.ts
new file mode 100644
index 000000000..411fe48d6
--- /dev/null
+++ b/packages/mermaid-timeline/src/detector.ts
@@ -0,0 +1,20 @@
+import type { ExternalDiagramDefinition } from 'mermaid';
+
+const id = 'timeline';
+
+const detector = (txt: string) => {
+  return txt.match(/^\s*timeline/) !== null;
+};
+
+const loader = async () => {
+  const { diagram } = await import('./diagram-definition');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
diff --git a/packages/mermaid-timeline/src/diagram-definition.ts b/packages/mermaid-timeline/src/diagram-definition.ts
new file mode 100644
index 000000000..9f18f261d
--- /dev/null
+++ b/packages/mermaid-timeline/src/diagram-definition.ts
@@ -0,0 +1,14 @@
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/timeline.jison';
+import * as db from './timelineDb';
+import renderer from './timelineRenderer';
+import styles from './styles';
+import { injectUtils } from './mermaidUtils';
+
+export const diagram = {
+  db,
+  renderer,
+  parser,
+  styles,
+  injectUtils,
+};
diff --git a/packages/mermaid-timeline/src/mermaidUtils.ts b/packages/mermaid-timeline/src/mermaidUtils.ts
new file mode 100644
index 000000000..7dc3732a8
--- /dev/null
+++ b/packages/mermaid-timeline/src/mermaidUtils.ts
@@ -0,0 +1,70 @@
+const warning = () => null;
+let localCommonDb = {};
+
+export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
+
+export const LEVELS: Record = {
+  trace: 0,
+  debug: 1,
+  info: 2,
+  warn: 3,
+  error: 4,
+  fatal: 5,
+};
+
+export const log: Record = {
+  trace: warning,
+  debug: warning,
+  info: warning,
+  warn: warning,
+  error: warning,
+  fatal: warning,
+};
+export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
+export let getConfig: () => object;
+export let sanitizeText: (str: string) => string;
+export const getCommonDb=() => localCommonDb;
+/**
+ * Placeholder for the real function that will be injected by mermaid.
+ */
+// eslint-disable @typescript-eslint/no-explicit-any
+export let setupGraphViewbox: (
+  graph: any,
+  svgElem: any,
+  padding: any,
+  useMaxWidth: boolean
+) => void;
+
+
+
+/**
+ * Function called by mermaid that injects utility functions that help the diagram to be a good citizen.
+ * @param _log
+ * @param _setLogLevel
+ * @param _getConfig
+ * @param _sanitizeText
+ * @param _setupGraphViewbox
+ * @param _commonDb
+ */
+export const injectUtils = (
+  _log: Record,
+  _setLogLevel: any,
+  _getConfig: any,
+  _sanitizeText: any,
+  _setupGraphViewbox: any,
+  _commonDb: any
+) => {
+  _log.info('Mermaid utils injected into timeline-diagram');
+  log.trace = _log.trace;
+  log.debug = _log.debug;
+  log.info = _log.info;
+  log.warn = _log.warn;
+  log.error = _log.error;
+  log.fatal = _log.fatal;
+  setLogLevel = _setLogLevel;
+  getConfig = _getConfig;
+  sanitizeText = _sanitizeText;
+  setupGraphViewbox = _setupGraphViewbox;
+  localCommonDb = _commonDb;
+
+};
diff --git a/packages/mermaid-timeline/src/parser/timeline.jison b/packages/mermaid-timeline/src/parser/timeline.jison
new file mode 100644
index 000000000..4f8ac5cbc
--- /dev/null
+++ b/packages/mermaid-timeline/src/parser/timeline.jison
@@ -0,0 +1,106 @@
+/** mermaid
+ *  https://mermaidjs.github.io/
+ *  (c) 2015 Knut Sveidqvist
+ *  MIT license.
+ */
+%lex
+%options case-insensitive
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
+
+// Directive states
+%x open_directive type_directive arg_directive
+
+
+%%
+
+\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
+":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
+\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
+((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
+\%%(?!\{)[^\n]*                                                 /* skip comments */
+[^\}]\%\%[^\n]*                                                 /* skip comments */
+[\n]+                   return 'NEWLINE';
+\s+                     /* skip whitespace */
+\#[^\n]*                /* skip comments */
+
+"timeline"               return 'timeline';
+"title"\s[^#\n;]+       return 'title';
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+[\}]                       { this.popState(); }
+[^\}]*                     return "acc_descr_multiline_value";
+"section"\s[^#:\n;]+    return 'section';
+
+// event starting with "==>" keyword
+":"\s[^#:\n;]+        return 'event';
+[^#:\n;]+               return 'period';
+
+
+<>                 return 'EOF';
+.                       return 'INVALID';
+
+/lex
+
+%left '^'
+
+%start start
+
+%% /* language grammar */
+
+start
+	: timeline document 'EOF' { return $2; }
+	| directive start
+	;
+
+document
+	: /* empty */ { $$ = [] }
+	| document line {$1.push($2);$$ = $1}
+	;
+
+line
+	: SPACE statement { $$ = $2 }
+	| statement { $$ = $1 }
+	| NEWLINE { $$=[];}
+	| EOF { $$=[];}
+	;
+
+directive
+  : openDirective typeDirective closeDirective 'NEWLINE'
+  | openDirective typeDirective ':' argDirective closeDirective 'NEWLINE'
+  ;
+
+statement
+  : title {yy.getCommonDb().setDiagramTitle($1.substr(6));$$=$1.substr(6);}
+  | acc_title acc_title_value  { $$=$2.trim();yy.getCommonDb().setAccTitle($$); }
+  | acc_descr acc_descr_value  { $$=$2.trim();yy.getCommonDb().setAccDescription($$); }
+  | acc_descr_multiline_value { $$=$1.trim();yy.getCommonDb().setAccDescription($$); }
+  | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
+  | period {yy.addTask($1,0,'');$$=$1;}
+  | period event {yy.addTask($1,0,$2.substr(2));$$=$1;}
+  | event {yy.addEvent($1.substr(2));$$=$1;}
+  | directive
+  ;
+
+openDirective
+  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
+  ;
+
+typeDirective
+  : type_directive { yy.parseDirective($1, 'type_directive'); }
+  ;
+
+argDirective
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
+  ;
+
+closeDirective
+  : close_directive { yy.parseDirective('}%%', 'close_directive', 'timeline'); }
+  ;
+
+%%
diff --git a/packages/mermaid-timeline/src/parser/timeline.spec.js b/packages/mermaid-timeline/src/parser/timeline.spec.js
new file mode 100644
index 000000000..cc54d9f78
--- /dev/null
+++ b/packages/mermaid-timeline/src/parser/timeline.spec.js
@@ -0,0 +1,150 @@
+import { parser } from './journey';
+import journeyDb from '../journeyDb';
+
+const parserFnConstructor = (str) => {
+  return () => {
+    parser.parse(str);
+  };
+};
+
+describe('when parsing a journey diagram it', function () {
+  beforeEach(function () {
+    parser.yy = journeyDb;
+    parser.yy.clear();
+  });
+
+  it('should handle a title definition', function () {
+    const str = 'journey\ntitle Adding journey diagram functionality to mermaid';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+  });
+
+  it('should handle an accessibility description (accDescr)', function () {
+    const str =
+      'journey\n' +
+      'accDescr: A user journey for family shopping\n' +
+      'title Adding journey diagram functionality to mermaid\n' +
+      'section Order from website';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+  });
+  it('should handle an accessibility multiline description (accDescr)', function () {
+    const str =
+      'journey\n' +
+      `accDescr {
+        A user journey for
+        family shopping
+      }` +
+      'title Adding journey diagram functionality to mermaid\n' +
+      'accTitle: Adding acc journey diagram functionality to mermaid\n' +
+      'section Order from website';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(journeyDb.getAccDescription()).toBe('A user journey for\nfamily shopping');
+    expect(journeyDb.getDiagramTitle()).toBe('Adding journey diagram functionality to mermaid');
+    expect(journeyDb.getAccTitle()).toBe('Adding acc journey diagram functionality to mermaid');
+  });
+  it('should handle an accessibility title (accDescr)', function () {
+    const str = `journey
+    accTitle: The title
+    section Order from website`;
+
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(journeyDb.getAccDescription()).toBe('');
+    expect(journeyDb.getAccTitle()).toBe('The title');
+  });
+
+  it('should handle a section definition', function () {
+    const str =
+      'journey\n' +
+      'title Adding journey diagram functionality to mermaid\n' +
+      'section Order from website';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+  });
+  it('should handle multiline section titles with different line breaks', function () {
+    const str =
+      'journey\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'section Line1
Line2
Line3
Line4Line5';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+  });
+
+  it('should handle a task definition', function () {
+    const str =
+      'journey\n' +
+      'title Adding journey diagram functionality to mermaid\n' +
+      'section Documentation\n' +
+      'A task: 5: Alice, Bob, Charlie\n' +
+      'B task: 3:Bob, Charlie\n' +
+      'C task: 5\n' +
+      'D task: 5: Charlie, Alice\n' +
+      'E task: 5:\n' +
+      'section Another section\n' +
+      'P task: 5:\n' +
+      'Q task: 5:\n' +
+      'R task: 5:';
+    expect(parserFnConstructor(str)).not.toThrow();
+
+    const tasks = parser.yy.getTasks();
+    expect(tasks.length).toEqual(8);
+
+    expect(tasks[0]).toEqual({
+      score: 5,
+      people: ['Alice', 'Bob', 'Charlie'],
+      section: 'Documentation',
+      task: 'A task',
+      type: 'Documentation',
+    });
+    expect(tasks[1]).toEqual({
+      score: 3,
+      people: ['Bob', 'Charlie'],
+      section: 'Documentation',
+      type: 'Documentation',
+      task: 'B task',
+    });
+    expect(tasks[2]).toEqual({
+      score: 5,
+      people: [],
+      section: 'Documentation',
+      type: 'Documentation',
+      task: 'C task',
+    });
+    expect(tasks[3]).toEqual({
+      score: 5,
+      people: ['Charlie', 'Alice'],
+      section: 'Documentation',
+      task: 'D task',
+      type: 'Documentation',
+    });
+    expect(tasks[4]).toEqual({
+      score: 5,
+      people: [''],
+      section: 'Documentation',
+      type: 'Documentation',
+      task: 'E task',
+    });
+    expect(tasks[5]).toEqual({
+      score: 5,
+      people: [''],
+      section: 'Another section',
+      type: 'Another section',
+      task: 'P task',
+    });
+    expect(tasks[6]).toEqual({
+      score: 5,
+      people: [''],
+      section: 'Another section',
+      type: 'Another section',
+      task: 'Q task',
+    });
+    expect(tasks[7]).toEqual({
+      score: 5,
+      people: [''],
+      section: 'Another section',
+      type: 'Another section',
+      task: 'R task',
+    });
+  });
+});
diff --git a/packages/mermaid-timeline/src/styles.js b/packages/mermaid-timeline/src/styles.js
new file mode 100644
index 000000000..51d69f58d
--- /dev/null
+++ b/packages/mermaid-timeline/src/styles.js
@@ -0,0 +1,78 @@
+import { darken, lighten, isDark } from 'khroma';
+
+const genSections = (options) => {
+  let sections = '';
+
+  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
+    options['lineColor' + i] = options['lineColor' + i] || options['cScaleInv' + i];
+    if (isDark(options['lineColor' + i])) {
+      options['lineColor' + i] = lighten(options['lineColor' + i], 20);
+    } else {
+      options['lineColor' + i] = darken(options['lineColor' + i], 20);
+    }
+  }
+
+  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
+    const sw = '' + (17 - 3 * i);
+    sections += `
+    .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${
+      i - 1
+    } path  {
+      fill: ${options['cScale' + i]};
+    }
+    .section-${i - 1} text {
+     fill: ${options['cScaleLabel' + i]};
+    }
+    .node-icon-${i - 1} {
+      font-size: 40px;
+      color: ${options['cScaleLabel' + i]};
+    }
+    .section-edge-${i - 1}{
+      stroke: ${options['cScale' + i]};
+    }
+    .edge-depth-${i - 1}{
+      stroke-width: ${sw};
+    }
+    .section-${i - 1} line {
+      stroke: ${options['cScaleInv' + i]} ;
+      stroke-width: 3;
+    }
+
+    .disabled, .disabled circle, .disabled text {
+      fill: lightgray;
+    }
+    .disabled text {
+      fill: #efefef;
+    }
+    `;
+  }
+  return sections;
+};
+
+const getStyles = (options) =>
+  `
+  .edge {
+    stroke-width: 3;
+  }
+  ${genSections(options)}
+  .section-root rect, .section-root path, .section-root circle  {
+    fill: ${options.git0};
+  }
+  .section-root text {
+    fill: ${options.gitBranchLabel0};
+  }
+  .icon-container {
+    height:100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .edge {
+    fill: none;
+  }
+  .eventWrapper  {
+   filter: brightness(120%);
+
+  }
+`;
+export default getStyles;
diff --git a/packages/mermaid-timeline/src/svgDraw.js b/packages/mermaid-timeline/src/svgDraw.js
new file mode 100644
index 000000000..bed0e2942
--- /dev/null
+++ b/packages/mermaid-timeline/src/svgDraw.js
@@ -0,0 +1,604 @@
+import { arc as d3arc , select} from 'd3';
+const MAX_SECTIONS = 12;
+
+export const drawRect = function (elem, rectData) {
+  const rectElem = elem.append('rect');
+  rectElem.attr('x', rectData.x);
+  rectElem.attr('y', rectData.y);
+  rectElem.attr('fill', rectData.fill);
+  rectElem.attr('stroke', rectData.stroke);
+  rectElem.attr('width', rectData.width);
+  rectElem.attr('height', rectData.height);
+  rectElem.attr('rx', rectData.rx);
+  rectElem.attr('ry', rectData.ry);
+
+  if (typeof rectData.class !== 'undefined') {
+    rectElem.attr('class', rectData.class);
+  }
+
+  return rectElem;
+};
+
+export const drawFace = function (element, faceData) {
+  const radius = 15;
+  const circleElement = element
+    .append('circle')
+    .attr('cx', faceData.cx)
+    .attr('cy', faceData.cy)
+    .attr('class', 'face')
+    .attr('r', radius)
+    .attr('stroke-width', 2)
+    .attr('overflow', 'visible');
+
+  const face = element.append('g');
+
+  //left eye
+  face
+    .append('circle')
+    .attr('cx', faceData.cx - radius / 3)
+    .attr('cy', faceData.cy - radius / 3)
+    .attr('r', 1.5)
+    .attr('stroke-width', 2)
+    .attr('fill', '#666')
+    .attr('stroke', '#666');
+
+  //right eye
+  face
+    .append('circle')
+    .attr('cx', faceData.cx + radius / 3)
+    .attr('cy', faceData.cy - radius / 3)
+    .attr('r', 1.5)
+    .attr('stroke-width', 2)
+    .attr('fill', '#666')
+    .attr('stroke', '#666');
+
+  /** @param {any} face */
+  function smile(face) {
+    const arc = d3arc()
+      .startAngle(Math.PI / 2)
+      .endAngle(3 * (Math.PI / 2))
+      .innerRadius(radius / 2)
+      .outerRadius(radius / 2.2);
+    //mouth
+    face
+      .append('path')
+      .attr('class', 'mouth')
+      .attr('d', arc)
+      .attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 2) + ')');
+  }
+
+  /** @param {any} face */
+  function sad(face) {
+    const arc = d3arc()
+      .startAngle((3 * Math.PI) / 2)
+      .endAngle(5 * (Math.PI / 2))
+      .innerRadius(radius / 2)
+      .outerRadius(radius / 2.2);
+    //mouth
+    face
+      .append('path')
+      .attr('class', 'mouth')
+      .attr('d', arc)
+      .attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 7) + ')');
+  }
+
+  /** @param {any} face */
+  function ambivalent(face) {
+    face
+      .append('line')
+      .attr('class', 'mouth')
+      .attr('stroke', 2)
+      .attr('x1', faceData.cx - 5)
+      .attr('y1', faceData.cy + 7)
+      .attr('x2', faceData.cx + 5)
+      .attr('y2', faceData.cy + 7)
+      .attr('class', 'mouth')
+      .attr('stroke-width', '1px')
+      .attr('stroke', '#666');
+  }
+
+  if (faceData.score > 3) {
+    smile(face);
+  } else if (faceData.score < 3) {
+    sad(face);
+  } else {
+    ambivalent(face);
+  }
+
+  return circleElement;
+};
+
+export const drawCircle = function (element, circleData) {
+  const circleElement = element.append('circle');
+  circleElement.attr('cx', circleData.cx);
+  circleElement.attr('cy', circleData.cy);
+  circleElement.attr('class', 'actor-' + circleData.pos);
+  circleElement.attr('fill', circleData.fill);
+  circleElement.attr('stroke', circleData.stroke);
+  circleElement.attr('r', circleData.r);
+
+  if (typeof circleElement.class !== 'undefined') {
+    circleElement.attr('class', circleElement.class);
+  }
+
+  if (typeof circleData.title !== 'undefined') {
+    circleElement.append('title').text(circleData.title);
+  }
+
+  return circleElement;
+};
+
+export const drawText = function (elem, textData) {
+  // Remove and ignore br:s
+  const nText = textData.text.replace(//gi, ' ');
+
+  const textElem = elem.append('text');
+  textElem.attr('x', textData.x);
+  textElem.attr('y', textData.y);
+  textElem.attr('class', 'legend');
+
+  textElem.style('text-anchor', textData.anchor);
+
+  if (typeof textData.class !== 'undefined') {
+    textElem.attr('class', textData.class);
+  }
+
+  const span = textElem.append('tspan');
+  span.attr('x', textData.x + textData.textMargin * 2);
+  span.text(nText);
+
+  return textElem;
+};
+
+export const drawLabel = function (elem, txtObject) {
+  /**
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} cut
+   */
+  function genPoints(x, y, width, height, cut) {
+    return (
+      x +
+      ',' +
+      y +
+      ' ' +
+      (x + width) +
+      ',' +
+      y +
+      ' ' +
+      (x + width) +
+      ',' +
+      (y + height - cut) +
+      ' ' +
+      (x + width - cut * 1.2) +
+      ',' +
+      (y + height) +
+      ' ' +
+      x +
+      ',' +
+      (y + height)
+    );
+  }
+  const polygon = elem.append('polygon');
+  polygon.attr('points', genPoints(txtObject.x, txtObject.y, 50, 20, 7));
+  polygon.attr('class', 'labelBox');
+
+  txtObject.y = txtObject.y + txtObject.labelMargin;
+  txtObject.x = txtObject.x + 0.5 * txtObject.labelMargin;
+  drawText(elem, txtObject);
+};
+
+export const drawSection = function (elem, section, conf) {
+  const g = elem.append('g');
+
+  const rect = getNoteRect();
+  rect.x = section.x;
+  rect.y = section.y;
+  rect.fill = section.fill;
+  rect.width = conf.width;
+  rect.height = conf.height;
+  rect.class = 'journey-section section-type-' + section.num;
+  rect.rx = 3;
+  rect.ry = 3;
+  drawRect(g, rect);
+
+  _drawTextCandidateFunc(conf)(
+    section.text,
+    g,
+    rect.x,
+    rect.y,
+    rect.width,
+    rect.height,
+    { class: 'journey-section section-type-' + section.num },
+    conf,
+    section.colour
+  );
+};
+
+let taskCount = -1;
+/**
+ * Draws an actor in the diagram with the attached line
+ *
+ * @param {any} elem The HTML element
+ * @param {any} task The task to render
+ * @param {any} conf The global configuration
+ */
+export const drawTask = function (elem, task, conf) {
+  const center = task.x + conf.width / 2;
+  const g = elem.append('g');
+  taskCount++;
+  const maxHeight = 300 + 5 * 30;
+  g.append('line')
+    .attr('id', 'task' + taskCount)
+    .attr('x1', center)
+    .attr('y1', task.y)
+    .attr('x2', center)
+    .attr('y2', maxHeight)
+    .attr('class', 'task-line')
+    .attr('stroke-width', '1px')
+    .attr('stroke-dasharray', '4 2')
+    .attr('stroke', '#666');
+
+  drawFace(g, {
+    cx: center,
+    cy: 300 + (5 - task.score) * 30,
+    score: task.score,
+  });
+
+  const rect = getNoteRect();
+  rect.x = task.x;
+  rect.y = task.y;
+  rect.fill = task.fill;
+  rect.width = conf.width;
+  rect.height = conf.height;
+  rect.class = 'task task-type-' + task.num;
+  rect.rx = 3;
+  rect.ry = 3;
+  drawRect(g, rect);
+
+  let xPos = task.x + 14;
+  // task.people.forEach((person) => {
+  //   const colour = task.actors[person].color;
+
+  //   const circle = {
+  //     cx: xPos,
+  //     cy: task.y,
+  //     r: 7,
+  //     fill: colour,
+  //     stroke: '#000',
+  //     title: person,
+  //     pos: task.actors[person].position,
+  //   };
+
+  //   drawCircle(g, circle);
+  //   xPos += 10;
+  // });
+
+  _drawTextCandidateFunc(conf)(
+    task.task,
+    g,
+    rect.x,
+    rect.y,
+    rect.width,
+    rect.height,
+    { class: 'task' },
+    conf,
+    task.colour
+  );
+};
+
+/**
+ * Draws a background rectangle
+ *
+ * @param {any} elem The html element
+ * @param {any} bounds The bounds of the drawing
+ */
+export const drawBackgroundRect = function (elem, bounds) {
+  const rectElem = drawRect(elem, {
+    x: bounds.startx,
+    y: bounds.starty,
+    width: bounds.stopx - bounds.startx,
+    height: bounds.stopy - bounds.starty,
+    fill: bounds.fill,
+    class: 'rect',
+  });
+  rectElem.lower();
+};
+
+export const getTextObj = function () {
+  return {
+    x: 0,
+    y: 0,
+    fill: undefined,
+    'text-anchor': 'start',
+    width: 100,
+    height: 100,
+    textMargin: 0,
+    rx: 0,
+    ry: 0,
+  };
+};
+
+export const getNoteRect = function () {
+  return {
+    x: 0,
+    y: 0,
+    width: 100,
+    anchor: 'start',
+    height: 100,
+    rx: 0,
+    ry: 0,
+  };
+};
+
+const _drawTextCandidateFunc = (function () {
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   * @param {any} colour
+   */
+  function byText(content, g, x, y, width, height, textAttrs, colour) {
+    const text = g
+      .append('text')
+      .attr('x', x + width / 2)
+      .attr('y', y + height / 2 + 5)
+      .style('font-color', colour)
+      .style('text-anchor', 'middle')
+      .text(content);
+    _setTextAttrs(text, textAttrs);
+  }
+
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   * @param {any} conf
+   * @param {any} colour
+   */
+  function byTspan(content, g, x, y, width, height, textAttrs, conf, colour) {
+    const { taskFontSize, taskFontFamily } = conf;
+
+    const lines = content.split(//gi);
+    for (let i = 0; i < lines.length; i++) {
+      const dy = i * taskFontSize - (taskFontSize * (lines.length - 1)) / 2;
+      const text = g
+        .append('text')
+        .attr('x', x + width / 2)
+        .attr('y', y)
+        .attr('fill', colour)
+        .style('text-anchor', 'middle')
+        .style('font-size', taskFontSize)
+        .style('font-family', taskFontFamily);
+      text
+        .append('tspan')
+        .attr('x', x + width / 2)
+        .attr('dy', dy)
+        .text(lines[i]);
+
+      text
+        .attr('y', y + height / 2.0)
+        .attr('dominant-baseline', 'central')
+        .attr('alignment-baseline', 'central');
+
+      _setTextAttrs(text, textAttrs);
+    }
+  }
+
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   * @param {any} conf
+   */
+  function byFo(content, g, x, y, width, height, textAttrs, conf) {
+    const body = g.append('switch');
+    const f = body
+      .append('foreignObject')
+      .attr('x', x)
+      .attr('y', y)
+      .attr('width', width)
+      .attr('height', height)
+      .attr('position', 'fixed');
+
+    const text = f
+      .append('xhtml:div')
+      .style('display', 'table')
+      .style('height', '100%')
+      .style('width', '100%');
+
+    text
+      .append('div')
+      .attr('class', 'label')
+      .style('display', 'table-cell')
+      .style('text-align', 'center')
+      .style('vertical-align', 'middle')
+      .text(content);
+
+    byTspan(content, body, x, y, width, height, textAttrs, conf);
+    _setTextAttrs(text, textAttrs);
+  }
+
+  /**
+   * @param {any} toText
+   * @param {any} fromTextAttrsDict
+   */
+  function _setTextAttrs(toText, fromTextAttrsDict) {
+    for (const key in fromTextAttrsDict) {
+      if (key in fromTextAttrsDict) {
+        // noinspection JSUnfilteredForInLoop
+        toText.attr(key, fromTextAttrsDict[key]);
+      }
+    }
+  }
+
+  return function (conf) {
+    return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan;
+  };
+})();
+
+const initGraphics = function (graphics) {
+  graphics
+    .append('defs')
+    .append('marker')
+    .attr('id', 'arrowhead')
+    .attr('refX', 5)
+    .attr('refY', 2)
+    .attr('markerWidth', 6)
+    .attr('markerHeight', 4)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 0,0 V 4 L6,2 Z'); // this is actual shape for arrowhead
+};
+
+/**
+ * @param {string} text The text to be wrapped
+ * @param {number} width The max width of the text
+ */
+function wrap(text, width) {
+  text.each(function () {
+    var text = select(this),
+      words = text
+        .text()
+        .split(/(\s+|
)/)
+        .reverse(),
+      word,
+      line = [],
+      lineHeight = 1.1, // ems
+      y = text.attr('y'),
+      dy = parseFloat(text.attr('dy')),
+      tspan = text
+        .text(null)
+        .append('tspan')
+        .attr('x', 0)
+        .attr('y', y)
+        .attr('dy', dy + 'em');
+    for (let j = 0; j < words.length; j++) {
+      word = words[words.length - 1 - j];
+      line.push(word);
+      tspan.text(line.join(' ').trim());
+      if (tspan.node().getComputedTextLength() > width || word === '
') {
+        line.pop();
+        tspan.text(line.join(' ').trim());
+        if (word === '
') {
+          line = [''];
+        } else {
+          line = [word];
+        }
+
+        tspan = text
+          .append('tspan')
+          .attr('x', 0)
+          .attr('y', y)
+          .attr('dy', lineHeight + 'em')
+          .text(word);
+      }
+    }
+  });
+}
+
+export const drawNode = function (elem, node, fullSection, conf) {
+  const section = (fullSection % MAX_SECTIONS) - 1;
+  const nodeElem = elem.append('g');
+  node.section = section;
+  nodeElem.attr(
+    'class',
+    (node.class ? node.class + ' ' : '') +
+      'timeline-node ' +
+      (section < 0 ? 'section-root' : 'section-' + section)
+  );
+  const bkgElem = nodeElem.append('g');
+
+  // Create the wrapped text element
+  const textElem = nodeElem.append('g');
+
+  const txt = textElem
+    .append('text')
+    .text(node.descr)
+    .attr('dy', '1em')
+    .attr('alignment-baseline', 'middle')
+    .attr('dominant-baseline', 'middle')
+    .attr('text-anchor', 'middle')
+    .call(wrap, node.width);
+  const bbox = txt.node().getBBox();
+  const fontSize = conf.fontSize && conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
+  node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding;
+  node.height = Math.max(node.height, node.maxHeight);
+  node.width = node.width + 2 * node.padding;
+
+  textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
+
+  // Create the background element
+  defaultBkg(bkgElem, node, section, conf);
+
+
+  return node;
+};
+
+ export const getVirtualNodeHeight = function (elem,node,conf) {
+ const textElem = elem.append('g');
+    const txt = textElem
+    .append('text')
+    .text(node.descr)
+    .attr('dy', '1em')
+    .attr('alignment-baseline', 'middle')
+    .attr('dominant-baseline', 'middle')
+    .attr('text-anchor', 'middle')
+    .call(wrap, node.width);
+  const bbox = txt.node().getBBox();
+  const fontSize = conf.fontSize && conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
+  textElem.remove();
+  return bbox.height + fontSize * 1.1 * 0.5 + node.padding;
+};
+
+
+const defaultBkg = function (elem, node, section) {
+  const rd = 5;
+  elem
+    .append('path')
+    .attr('id', 'node-' + node.id)
+    .attr('class', 'node-bkg node-' + node.type)
+    .attr(
+      'd',
+      `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${
+        node.width - 2 * rd
+      } q5,0 5,5 v${node.height - rd} H0 Z`
+    );
+
+  elem
+    .append('line')
+    .attr('class', 'node-line-' + section)
+    .attr('x1', 0)
+    .attr('y1', node.height)
+    .attr('x2', node.width)
+    .attr('y2', node.height);
+};
+
+export default {
+  drawRect,
+  drawCircle,
+  drawSection,
+  drawText,
+  drawLabel,
+  drawTask,
+  drawBackgroundRect,
+  getTextObj,
+  getNoteRect,
+  initGraphics,
+  drawNode,
+  getVirtualNodeHeight,
+};
diff --git a/packages/mermaid-timeline/src/timelineDb.js b/packages/mermaid-timeline/src/timelineDb.js
new file mode 100644
index 000000000..dda3a97cb
--- /dev/null
+++ b/packages/mermaid-timeline/src/timelineDb.js
@@ -0,0 +1,100 @@
+import { getCommonDb as _getCommonDb,log  } from './mermaidUtils';
+
+let currentSection = '';
+let currentTaskId = 0;
+
+const sections = [];
+const tasks = [];
+const rawTasks = [];
+
+export const getCommonDb = _getCommonDb;
+
+export const clear = function () {
+  sections.length = 0;
+  tasks.length = 0;
+  currentSection = '';
+  rawTasks.length = 0;
+  _getCommonDb().clear();
+};
+
+export const addSection = function (txt) {
+  currentSection = txt;
+  sections.push(txt);
+};
+
+export const getSections = function () {
+  return sections;
+};
+
+export const getTasks = function () {
+  let allItemsProcessed = compileTasks();
+  const maxDepth = 100;
+  let iterationCount = 0;
+  while (!allItemsProcessed && iterationCount < maxDepth) {
+    allItemsProcessed = compileTasks();
+    iterationCount++;
+  }
+
+  tasks.push(...rawTasks);
+
+  return tasks;
+};
+
+export const addTask = function (period, length, event) {
+
+  const rawTask = {
+    id: currentTaskId++,
+    section: currentSection,
+    type: currentSection,
+    task: period,
+    score : length?length:0,
+    //if event is defined, then add it the events array
+    events: event?[event]:[],
+  };
+  rawTasks.push(rawTask);
+};
+
+export const addEvent = function (event) {
+ // fetch current task with currnetTaskId
+  const currentTask = rawTasks.find((task) => task.id === currentTaskId - 1);
+  //add event to the events array
+  currentTask.events.push(event);
+};
+
+
+export const addTaskOrg = function (descr) {
+  const newTask = {
+    section: currentSection,
+    type: currentSection,
+    description: descr,
+    task: descr,
+    classes: [],
+  };
+  tasks.push(newTask);
+};
+
+const compileTasks = function () {
+  const compileTask = function (pos) {
+    return rawTasks[pos].processed;
+  };
+
+  let allProcessed = true;
+  for (let i = 0; i < rawTasks.length; i++) {
+    compileTask(i);
+
+    allProcessed = allProcessed && rawTasks[i].processed;
+  }
+  return allProcessed;
+};
+
+export default {
+  clear,
+  getCommonDb,
+  addSection,
+  getSections,
+  getTasks,
+  addTask,
+  addTaskOrg,
+  addEvent,
+};
+
diff --git a/packages/mermaid-timeline/src/timelineDb.spec.js b/packages/mermaid-timeline/src/timelineDb.spec.js
new file mode 100644
index 000000000..3a17ca202
--- /dev/null
+++ b/packages/mermaid-timeline/src/timelineDb.spec.js
@@ -0,0 +1,91 @@
+import journeyDb from './journeyDb';
+
+describe('when using the journeyDb', function () {
+  beforeEach(function () {
+    journeyDb.clear();
+  });
+
+  describe('when calling the clear function', function () {
+    beforeEach(function () {
+      journeyDb.addSection('weekends skip test');
+      journeyDb.addTask('test1', '4: id1, id3');
+      journeyDb.addTask('test2', '2: id2');
+      journeyDb.clear();
+    });
+
+    it.each`
+      fn               | expected
+      ${'getTasks'}    | ${[]}
+      ${'getAccTitle'} | ${''}
+      ${'getSections'} | ${[]}
+      ${'getActors'}   | ${[]}
+    `('should clear $fn', ({ fn, expected }) => {
+      expect(journeyDb[fn]()).toEqual(expected);
+    });
+  });
+
+  describe('when calling the clear function', function () {
+    beforeEach(function () {
+      journeyDb.addSection('weekends skip test');
+      journeyDb.addTask('test1', '3: id1, id3');
+      journeyDb.addTask('test2', '1: id2');
+      journeyDb.clear();
+    });
+    it.each`
+      fn                     | expected
+      ${'getTasks'}          | ${[]}
+      ${'getAccTitle'}       | ${''}
+      ${'getAccDescription'} | ${''}
+      ${'getSections'}       | ${[]}
+    `('should clear $fn', ({ fn, expected }) => {
+      expect(journeyDb[fn]()).toEqual(expected);
+    });
+  });
+
+  describe('tasks and actors should be added', function () {
+    journeyDb.setAccTitle('Shopping');
+    journeyDb.setAccDescription('A user journey for family shopping');
+    journeyDb.addSection('Journey to the shops');
+    journeyDb.addTask('Get car keys', ':5:Dad');
+    journeyDb.addTask('Go to car', ':3:Dad, Mum, Child#1, Child#2');
+    journeyDb.addTask('Drive to supermarket', ':4:Dad');
+    journeyDb.addSection('Do shopping');
+    journeyDb.addTask('Go shopping', ':5:Mum');
+
+    expect(journeyDb.getAccTitle()).toEqual('Shopping');
+    expect(journeyDb.getAccDescription()).toEqual('A user journey for family shopping');
+    expect(journeyDb.getTasks()).toEqual([
+      {
+        score: 5,
+        people: ['Dad'],
+        section: 'Journey to the shops',
+        task: 'Get car keys',
+        type: 'Journey to the shops',
+      },
+      {
+        score: 3,
+        people: ['Dad', 'Mum', 'Child#1', 'Child#2'],
+        section: 'Journey to the shops',
+        task: 'Go to car',
+        type: 'Journey to the shops',
+      },
+      {
+        score: 4,
+        people: ['Dad'],
+        section: 'Journey to the shops',
+        task: 'Drive to supermarket',
+        type: 'Journey to the shops',
+      },
+      {
+        score: 5,
+        people: ['Mum'],
+        section: 'Do shopping',
+        task: 'Go shopping',
+        type: 'Do shopping',
+      },
+    ]);
+    expect(journeyDb.getActors()).toEqual(['Child#1', 'Child#2', 'Dad', 'Mum']);
+
+    expect(journeyDb.getSections()).toEqual(['Journey to the shops', 'Do shopping']);
+  });
+});
diff --git a/packages/mermaid-timeline/src/timelineRenderer.ts b/packages/mermaid-timeline/src/timelineRenderer.ts
new file mode 100644
index 000000000..aa3e2199c
--- /dev/null
+++ b/packages/mermaid-timeline/src/timelineRenderer.ts
@@ -0,0 +1,415 @@
+// @ts-nocheck TODO: fix file
+import { select } from 'd3';
+import svgDraw from './svgDraw';
+import { configureSvgSize } from '../../setupGraphViewbox';
+import addSVGAccessibilityFields from '../../accessibility';
+
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
+
+export const setConf = function (cnf) {
+  const keys = Object.keys(cnf);
+
+  keys.forEach(function (key) {
+    conf[key] = cnf[key];
+  });
+};
+
+export const draw = function (text, id, version, diagObj) {
+  //1. Fetch the configuration
+  const conf = getConfig();
+  const LEFT_MARGIN = conf.leftMargin?conf.leftMargin:50;
+
+  //2. Clear the diagram db before parsing
+  diagObj.db.clear();
+
+  //3. Parse the diagram text
+  diagObj.parser.parse(text + '\n');
+
+  log.info('timeline', diagObj.db);
+
+  const securityLevel = conf.securityLevel;
+  // Handle root and Document for when rendering in sandbox mode
+  let sandboxElement;
+  if (securityLevel === 'sandbox') {
+    sandboxElement = select('#i' + id);
+  }
+  const root =
+    securityLevel === 'sandbox'
+      ? select(sandboxElement.nodes()[0].contentDocument.body)
+      : select('body');
+
+  // Init bounds
+  bounds.init();
+
+
+
+  const svg = root.select('#' + id);
+
+  svg.append('g');
+
+  //4. Fetch the diagram data
+  const tasks = diagObj.db.getTasks();
+  const title = diagObj.db.getCommonDb().getDiagramTitle();
+
+  //log tasks
+  log.info(tasks);
+
+  //5. Initialize the diagram
+  svgDraw.initGraphics(svg);
+
+  //bounds.insert(0, 0, LEFT_MARGIN, 0);
+  // fetch Sections
+  const sections = diagObj.db.getSections();
+  // log sections
+  log.info(sections);
+
+  let maxSectionHeight = 0;
+  let maxTaskHeight = 0;
+  let sectionBeginX = 0;
+  let sectionBeginY = 0;
+  let masterX = 50 + LEFT_MARGIN;
+  sectionBeginX = masterX;
+  let masterY = 50;
+  sectionBeginY=50;
+  //draw sections
+  let sectionNumber = 0;
+
+  //Calculate the max height of the sections
+  sections.forEach(function (section) {
+    const sectionNode = {
+      number: sectionNumber,
+      descr: section,
+      section: sectionNumber,
+      width: 150,
+      padding: 20,
+      maxHeight: maxSectionHeight,
+    };
+    const sectionHeight = svgDraw.getVirtualNodeHeight(svg, sectionNode, conf);
+    log.info('sectionHeight before draw', sectionHeight);
+    maxSectionHeight = Math.max(maxSectionHeight, sectionHeight +20);
+  });
+
+//tasks length and maxEventCount
+let maxEventCount = 0;
+  log.info('tasks.length', tasks.length);
+   //calculate max task height
+  // for loop till tasks.length
+  for (let i = 0; i < tasks.length; i++) {
+    const task = tasks[i];
+
+    const taskNode = {
+      number: i,
+      descr: task,
+      section: task.section,
+      width: 150,
+      padding: 20,
+      maxHeight: maxTaskHeight,
+    };
+    const taskHeight = svgDraw.getVirtualNodeHeight(svg, taskNode, conf);
+    log.info('taskHeight before draw', taskHeight);
+    maxTaskHeight = Math.max(maxTaskHeight, taskHeight + 20);
+
+    //calculate maxEventCount
+    maxEventCount = Math.max(maxEventCount, task.events.length);
+  }
+
+
+  log.info('maxSectionHeight before draw', maxSectionHeight);
+  log.info('maxTaskHeight before draw', maxTaskHeight);
+
+  if (sections && sections.length > 0) {
+    sections.forEach((section) => {
+
+      const sectionNode = {
+        number: sectionNumber,
+        descr: section,
+        section: sectionNumber,
+        width: 150,
+        padding: 20,
+        maxHeight: maxSectionHeight,
+      };
+      //log section node
+      log.info('sectionNode', sectionNode);
+      const sectionNodeWrapper = svg.append('g');
+      const node = svgDraw.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf);
+      // add node to section list
+      //sectionList.push(node);
+      //const nodeHeight = node.height + 20;
+      //Post process the node
+      //append g
+
+      sectionNodeWrapper.attr(
+        'transform',
+        `translate(${masterX}, ${sectionBeginY})`
+      );
+      //maxSectionHeight = Math.max(maxSectionHeight, nodeHeight);
+      masterY += maxSectionHeight + 50;
+
+
+
+      //draw tasks for this section
+      //filter task where tasks.section == section
+      const tasksForSection = tasks.filter((task) => task.section === section);
+      if (tasksForSection.length > 0) {
+
+
+        drawTasks(svg, tasksForSection, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,false);
+      }
+      // todo replace with total width of section and its tasks
+      masterX += 200 * Math.max(tasksForSection.length, 1);
+
+      masterY = sectionBeginY;
+      sectionNumber++;
+    });
+  } else {
+    //draw tasks
+    drawTasks(svg, tasks, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,true);
+  }
+
+
+
+
+  // draw tasks
+  //drawTasks(svg, tasks, 0);
+
+  const box = bounds.getBounds();
+  if (title) {
+    svg
+      .append('text')
+      .text(title)
+      .attr('x', LEFT_MARGIN)
+      .attr('font-size', '4ex')
+      .attr('font-weight', 'bold')
+      .attr('y', 25);
+  }
+
+  const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
+  const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;
+
+// Setup the view box and size of the svg element
+  setupGraphViewbox(undefined, svg, conf.timeline.padding, conf.timeline.useMaxWidth);
+
+  //5. Draw the diagram
+ const maxTaskLength = 500;
+
+ // Draw activity line
+  svg
+    .append('line')
+    .attr('x1', LEFT_MARGIN)
+    .attr('y1', maxSectionHeight + maxTaskHeight +150) // One section head + one task + margins
+    .attr('x2', tasks && tasks.length? (tasks.length*200)+ 400 :  400) // Subtract stroke width so arrow point is retained
+    .attr('y2', maxSectionHeight + maxTaskHeight +150)
+    .attr('stroke-width', 4)
+    .attr('stroke', 'black')
+    .attr('marker-end', 'url(#arrowhead)');
+
+  const extraVertForTitle = title ? 70 : 0;
+  svg.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`);
+  svg.attr('preserveAspectRatio', 'xMinYMin meet');
+  svg.attr('height', height + extraVertForTitle + 25);
+
+  // addSVGAccessibilityFields(diagObj.db, diagram, id);
+};
+
+export const bounds = {
+  data: {
+    startx: undefined,
+    stopx: undefined,
+    starty: undefined,
+    stopy: undefined,
+  },
+  verticalPos: 0,
+
+  sequenceItems: [],
+  init: function () {
+    this.sequenceItems = [];
+    this.data = {
+      startx: undefined,
+      stopx: undefined,
+      starty: undefined,
+      stopy: undefined,
+    };
+    this.verticalPos = 0;
+  },
+  updateVal: function (obj, key, val, fun) {
+    if (typeof obj[key] === 'undefined') {
+      obj[key] = val;
+    } else {
+      obj[key] = fun(val, obj[key]);
+    }
+  },
+  updateBounds: function (startx, starty, stopx, stopy) {
+    const conf = getConfig().timeline;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const _self = this;
+    let cnt = 0;
+    /** @param {any} type */
+    function updateFn(type) {
+      return function updateItemBounds(item) {
+        cnt++;
+        // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
+        const n = _self.sequenceItems.length - cnt + 1;
+        _self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min);
+        _self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max);
+
+        _self.updateVal(bounds.data, 'startx', startx - n * conf.boxMargin, Math.min);
+        _self.updateVal(bounds.data, 'stopx', stopx + n * conf.boxMargin, Math.max);
+
+        if (!(type === 'activation')) {
+          _self.updateVal(item, 'startx', startx - n * conf.boxMargin, Math.min);
+          _self.updateVal(item, 'stopx', stopx + n * conf.boxMargin, Math.max);
+
+          _self.updateVal(bounds.data, 'starty', starty - n * conf.boxMargin, Math.min);
+          _self.updateVal(bounds.data, 'stopy', stopy + n * conf.boxMargin, Math.max);
+        }
+      };
+    }
+
+    this.sequenceItems.forEach(updateFn());
+  },
+  insert: function (startx, starty, stopx, stopy) {
+    const _startx = Math.min(startx, stopx);
+    const _stopx = Math.max(startx, stopx);
+    const _starty = Math.min(starty, stopy);
+    const _stopy = Math.max(starty, stopy);
+
+    this.updateVal(bounds.data, 'startx', _startx, Math.min);
+    this.updateVal(bounds.data, 'starty', _starty, Math.min);
+    this.updateVal(bounds.data, 'stopx', _stopx, Math.max);
+    this.updateVal(bounds.data, 'stopy', _stopy, Math.max);
+
+    this.updateBounds(_startx, _starty, _stopx, _stopy);
+  },
+  bumpVerticalPos: function (bump) {
+    this.verticalPos = this.verticalPos + bump;
+    this.data.stopy = this.verticalPos;
+  },
+  getVerticalPos: function () {
+    return this.verticalPos;
+  },
+  getBounds: function () {
+    return this.data;
+  },
+};
+
+
+
+export const drawTasks = function (diagram, tasks, sectionColor, masterX, masterY, maxTaskHeight,conf,maxEventCount, isWithoutSections) {
+
+  const taskBeginY = masterY;
+
+  const taskBeginX = masterX;
+
+  // Draw the tasks
+  for (let i = 0; i < tasks.length; i++) {
+
+    const task = tasks[i];
+    // create node from task
+    const taskNode = {
+      descr: task.task,
+      section: sectionColor,
+      number : sectionColor,
+      width: 150,
+      padding: 20,
+      maxHeight: maxTaskHeight,
+    };
+
+    //log task node
+    log.info('taskNode', taskNode);
+    // create task wrapper
+    const taskWrapper = diagram.append('g').attr('class', 'taskWrapper');
+    const node = svgDraw.drawNode(taskWrapper, taskNode, sectionColor, conf);
+    const taskHeight = node.height;
+    //log task height
+    log.info('taskHeight after draw', taskHeight);
+    taskWrapper.attr(
+      'transform',
+      `translate(${masterX}, ${masterY})`
+    );
+
+    // update max task height
+    maxTaskHeight = Math.max(maxTaskHeight, taskHeight);
+
+
+
+     // if task has events, draw them
+    if (task.events) {
+    // draw a line between the task and the events
+      const lineWrapper = diagram.append('g').attr('class', 'lineWrapper');
+
+      let linelength = maxTaskHeight;
+
+
+
+    //add margin to task
+    masterY += 100;
+     linelength = linelength+ drawEvents(diagram, task.events, sectionColor, masterX, masterY, conf);
+      masterY -= 100;
+
+      lineWrapper
+    .append('line')
+    .attr('x1', masterX + 190/2)
+    .attr('y1', masterY + maxTaskHeight) // One section head + one task + margins
+    .attr('x2', masterX + 190/2) // Subtract stroke width so arrow point is retained
+    .attr('y2', masterY  + linelength + maxEventCount * 100)
+    .attr('stroke-width', 2)
+    .attr('stroke', 'black')
+    .attr('marker-end', 'url(#arrowhead)')
+      .attr('stroke-dasharray', "5,5");
+    }
+
+
+
+    masterX = masterX + 200;
+    if (isWithoutSections) {
+       sectionColor++;
+  }
+  }
+
+
+// reset Y coordinate for next section
+    masterY= masterY -10; ;
+};
+
+export const drawEvents = function (diagram, events, sectionColor, masterX, masterY, conf) {
+
+  let maxEventHeight = 0;
+  const eventBeginY = masterY;
+  masterY = masterY + 100
+  // Draw the events
+  for (let i = 0; i < events.length; i++) {
+    const event = events[i];
+    // create node from event
+    const eventNode = {
+      descr: event,
+      section: sectionColor,
+      number : sectionColor,
+      width: 150,
+      padding: 20,
+      maxHeight: 50,
+    };
+
+    //log task node
+    log.info('eventNode', eventNode);
+    // create event wrapper
+    const eventWrapper = diagram.append('g').attr('class', 'eventWrapper');
+    const node = svgDraw.drawNode(eventWrapper, eventNode, sectionColor, conf)
+    const eventHeight = node.height;
+    maxEventHeight= maxEventHeight + eventHeight;
+    eventWrapper.attr(
+      'transform',
+      `translate(${masterX}, ${masterY})`
+    );
+    masterY = masterY + 10 + eventHeight;
+
+  }
+  // set masterY back to eventBeginY
+  masterY = eventBeginY;
+  return maxEventHeight;
+
+};
+
+export default {
+  setConf,
+  draw,
+};
diff --git a/packages/mermaid-timeline/src/types/index.d.ts b/packages/mermaid-timeline/src/types/index.d.ts
new file mode 100644
index 000000000..999ff2f49
--- /dev/null
+++ b/packages/mermaid-timeline/src/types/index.d.ts
@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    mermaid: any; // 👈️ turn off type checking
+  }
+}
diff --git a/packages/mermaid-timeline/tsconfig.json b/packages/mermaid-timeline/tsconfig.json
new file mode 100644
index 000000000..310137cc0
--- /dev/null
+++ b/packages/mermaid-timeline/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "module": "esnext",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["./src/**/*.ts"],
+  "typeRoots": ["./src/types"]
+}
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index ff199ca8b..63fe078fa 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -26,6 +26,7 @@ export interface MermaidConfig {
   sequence?: SequenceDiagramConfig;
   gantt?: GanttDiagramConfig;
   journey?: JourneyDiagramConfig;
+  timeline?: TimelineDiagramConfig;
   class?: ClassDiagramConfig;
   state?: StateDiagramConfig;
   er?: ErDiagramConfig;
@@ -292,6 +293,29 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
   sectionColours?: string[];
 }
 
+export interface TimelineDiagramConfig extends BaseDiagramConfig {
+  diagramMarginX?: number;
+  diagramMarginY?: number;
+  leftMargin?: number;
+  width?: number;
+  height?: number;
+  boxMargin?: number;
+  boxTextMargin?: number;
+  noteMargin?: number;
+  messageMargin?: number;
+  messageAlign?: string;
+  bottomMarginAdj?: number;
+  rightAngles?: boolean;
+  taskFontSize?: string | number;
+  taskFontFamily?: string;
+  taskMargin?: number;
+  activationWidth?: number;
+  textPlacement?: string;
+  actorColours?: string[];
+  sectionFills?: string[];
+  sectionColours?: string[];
+}
+
 export interface GanttDiagramConfig extends BaseDiagramConfig {
   titleTopMargin?: number;
   barHeight?: number;
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 37d4f71ff..5bb4a1bd8 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -861,6 +861,155 @@ const config: Partial = {
     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'],
+  },
   class: {
     /**
      * ### titleTopMargin
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index 748cc5f96..ddb22df2c 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -5,6 +5,8 @@ import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
 import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
 import { addStylesForDiagram } from '../styles';
 import { DiagramDefinition, DiagramDetector } from './types';
+import  * as  _commonDb  from '../commonDb';
+
 
 /*
   Packaging and exposing resources for external diagrams so that they can import
@@ -16,6 +18,7 @@ export const setLogLevel = _setLogLevel;
 export const getConfig = _getConfig;
 export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
 export const setupGraphViewbox = _setupGraphViewbox;
+export const getCommonDb = () => { return _commonDb };
 
 const diagrams: Record = {};
 export interface Detectors {
@@ -46,7 +49,7 @@ export const registerDiagram = (
   addStylesForDiagram(id, diagram.styles);
 
   if (diagram.injectUtils) {
-    diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
+    diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox,getCommonDb());
   }
 };
 
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 23810d133..652f35402 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -6,6 +6,7 @@ export interface InjectUtils {
   _getConfig: any;
   _sanitizeText: any;
   _setupGraphViewbox: any;
+  _commonDb: any;
 }
 
 /**
@@ -27,7 +28,8 @@ export interface DiagramDefinition {
     _setLogLevel: InjectUtils['_setLogLevel'],
     _getConfig: InjectUtils['_getConfig'],
     _sanitizeText: InjectUtils['_sanitizeText'],
-    _setupGraphViewbox: InjectUtils['_setupGraphViewbox']
+    _setupGraphViewbox: InjectUtils['_setupGraphViewbox'],
+    _commonDb: InjectUtils['_commonDb']
   ) => void;
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5de78bdb1..2ba8f0776 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -349,6 +349,22 @@ importers:
         specifier: ^3.0.2
         version: 3.0.2
 
+  packages/mermaid-timeline:
+    dependencies:
+      d3:
+        specifier: ^7.0.0
+        version: 7.6.1
+      khroma:
+        specifier: ^2.0.0
+        version: 2.0.0
+    devDependencies:
+      concurrently:
+        specifier: ^7.4.0
+        version: 7.5.0
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-mindmap':
@@ -3634,7 +3650,7 @@ packages:
   /axios/0.21.4_debug@4.3.2:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
-      follow-redirects: 1.15.2_debug@4.3.2
+      follow-redirects: 1.15.2
     transitivePeerDependencies:
       - debug
     dev: true
@@ -6309,7 +6325,7 @@ packages:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: true
 
-  /follow-redirects/1.15.2_debug@4.3.2:
+  /follow-redirects/1.15.2:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
     peerDependencies:
@@ -6317,8 +6333,6 @@ packages:
     peerDependenciesMeta:
       debug:
         optional: true
-    dependencies:
-      debug: 4.3.2
     dev: true
 
   /foreground-child/2.0.0:
@@ -6911,7 +6925,7 @@ packages:
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.2_debug@4.3.2
+      follow-redirects: 1.15.2
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug

From 14ff8a857027bb24bb17fc34906271b2afdff568 Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Wed, 23 Nov 2022 19:32:27 +0100
Subject: [PATCH 02/26] add runnning example

---
 cypress/platform/ashish2.html | 67 +++++++++++++++++++++++++----------
 1 file changed, 48 insertions(+), 19 deletions(-)

diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html
index e10ea6a2d..3fe223680 100644
--- a/cypress/platform/ashish2.html
+++ b/cypress/platform/ashish2.html
@@ -56,27 +56,56 @@
   
     
Security check

     
-flowchart TD
-    A --> B
-    B --> C
-    A --> C
+ timeline
+        title My day
+        section section with no tasks
+        section Go to work at the dog office
+          1930 : first step : second step
+               : third step
+          1940 : fourth step : fifth step
+        section Go home
+          1950 : India got independent and already won war against Pakistan
+          1960 : India fights poverty, looses war to China
+          1970 : Green Revolution comes to india
+        section Another section with no tasks
+          I am a big big big tasks
+          I am not so big tasks
+    

+     
+ timeline
+        title England's History Timeline
+        section Stone Age
+          7600 BC : Britain's oldest known house was built in Orkney, Scotland
+          6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers.
+        section Broze Age
+          2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
+               : New styles of pottery and ways of burying the dead appear.
+          2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
+                  : The first metal objects are made in Britain.Some other nice things happen.
+
     

     
-classDiagram
-        direction LR
-        class Student {
-          -idCard : IdCard
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides
+ timeline
+        title History of Social Media Platform
+        section Rise of Social Media
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008s : Instagram
+          2010 : Pinterest
+    

+    
+ timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008s : Instagram
+          2010 : Pinterest
     

     
  timeline

From 2141057ab49fbfb4a7ddcfd959032820aeaa1c56 Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Thu, 15 Dec 2022 17:00:53 +0100
Subject: [PATCH 03/26] add more runnning examples

---
 cypress/platform/ashish2.html                 |  18 +-
 .../mermaid-timeline/src/timelineRenderer.ts  | 178 +++++-------------
 packages/mermaid/src/Diagram.ts               |   2 +-
 3 files changed, 55 insertions(+), 143 deletions(-)

diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html
index 3fe223680..f1ebaa827 100644
--- a/cypress/platform/ashish2.html
+++ b/cypress/platform/ashish2.html
@@ -60,12 +60,12 @@
         title My day
         section section with no tasks
         section Go to work at the dog office
-          1930 : first step : second step
+          1930 : first step : second step is a long step
                : third step
           1940 : fourth step : fifth step
         section Go home
           1950 : India got independent and already won war against Pakistan
-          1960 : India fights poverty, looses war to China
+          1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
           1970 : Green Revolution comes to india
         section Another section with no tasks
           I am a big big big tasks
@@ -81,7 +81,7 @@
           2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
                : New styles of pottery and ways of burying the dead appear.
           2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
-                  : The first metal objects are made in Britain.Some other nice things happen.
+                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
 
     

     
@@ -89,7 +89,7 @@
         title History of Social Media Platform
         section Rise of Social Media
           2002 : LinkedIn
-          2004 : Facebook : Google
+          2004 : Facebook : Google : Pixar
           2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
@@ -97,10 +97,13 @@
           2010 : Pinterest
     

     
+---
+timeline:disableMulticolor: true
+---
  timeline
         title History of Social Media Platform
           2002 : LinkedIn
-          2004 : Facebook : Google
+          2004 : Facebook : Google : Pixar
           2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
@@ -134,7 +137,7 @@ mindmap
         ::icon(mdi mdi-fire)
           gc7((grand
grand
child 8))
         

-    
+    
       gantt
         title Style today marker (vertical line should be 5px wide and half-transparent blue)
         dateFormat YYYY-MM-DD
@@ -168,6 +171,9 @@ mindmap
         gantt: {
           useMaxWidth: false,
         },
+        timeline: {
+          disableMulticolor: false,
+        },
         useMaxWidth: false,
         lazyLoadedDiagrams: [
           // './mermaid-mindmap-detector.esm.mjs',
diff --git a/packages/mermaid-timeline/src/timelineRenderer.ts b/packages/mermaid-timeline/src/timelineRenderer.ts
index aa3e2199c..6fd68cf60 100644
--- a/packages/mermaid-timeline/src/timelineRenderer.ts
+++ b/packages/mermaid-timeline/src/timelineRenderer.ts
@@ -38,11 +38,6 @@ export const draw = function (text, id, version, diagObj) {
       ? select(sandboxElement.nodes()[0].contentDocument.body)
       : select('body');
 
-  // Init bounds
-  bounds.init();
-
-
-
   const svg = root.select('#' + id);
 
   svg.append('g');
@@ -57,7 +52,6 @@ export const draw = function (text, id, version, diagObj) {
   //5. Initialize the diagram
   svgDraw.initGraphics(svg);
 
-  //bounds.insert(0, 0, LEFT_MARGIN, 0);
   // fetch Sections
   const sections = diagObj.db.getSections();
   // log sections
@@ -65,14 +59,16 @@ export const draw = function (text, id, version, diagObj) {
 
   let maxSectionHeight = 0;
   let maxTaskHeight = 0;
-  let sectionBeginX = 0;
+  //let sectionBeginX = 0;
+  let depthY = 0;
   let sectionBeginY = 0;
   let masterX = 50 + LEFT_MARGIN;
-  sectionBeginX = masterX;
+  //sectionBeginX = masterX;
   let masterY = 50;
   sectionBeginY=50;
   //draw sections
   let sectionNumber = 0;
+  let hasSections = true;
 
   //Calculate the max height of the sections
   sections.forEach(function (section) {
@@ -90,7 +86,8 @@ export const draw = function (text, id, version, diagObj) {
   });
 
 //tasks length and maxEventCount
-let maxEventCount = 0;
+  let maxEventCount = 0;
+  let maxEventLineLength = 0;
   log.info('tasks.length', tasks.length);
    //calculate max task height
   // for loop till tasks.length
@@ -111,6 +108,22 @@ let maxEventCount = 0;
 
     //calculate maxEventCount
     maxEventCount = Math.max(maxEventCount, task.events.length);
+    //calculate maxEventLineLength
+    let maxEventLineLengthTemp = 0;
+    for (let j = 0; j < task.events.length; j++) {
+      const event = task.events[j];
+       const eventNode = {
+      descr: event,
+      section: task.section,
+      number : task.section,
+      width: 150,
+      padding: 20,
+      maxHeight: 50,
+    };
+      maxEventLineLengthTemp += svgDraw.getVirtualNodeHeight(svg, eventNode, conf);
+    }
+    maxEventLineLength = Math.max(maxEventLineLength, maxEventLineLengthTemp);
+
   }
 
 
@@ -132,17 +145,13 @@ let maxEventCount = 0;
       log.info('sectionNode', sectionNode);
       const sectionNodeWrapper = svg.append('g');
       const node = svgDraw.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf);
-      // add node to section list
-      //sectionList.push(node);
-      //const nodeHeight = node.height + 20;
-      //Post process the node
-      //append g
+      log.info('sectionNode output', node);
 
       sectionNodeWrapper.attr(
         'transform',
         `translate(${masterX}, ${sectionBeginY})`
       );
-      //maxSectionHeight = Math.max(maxSectionHeight, nodeHeight);
+
       masterY += maxSectionHeight + 50;
 
 
@@ -153,7 +162,7 @@ let maxEventCount = 0;
       if (tasksForSection.length > 0) {
 
 
-        drawTasks(svg, tasksForSection, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,false);
+        drawTasks(svg, tasksForSection, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,maxEventLineLength,maxSectionHeight,false);
       }
       // todo replace with total width of section and its tasks
       masterX += 200 * Math.max(tasksForSection.length, 1);
@@ -163,143 +172,44 @@ let maxEventCount = 0;
     });
   } else {
     //draw tasks
-    drawTasks(svg, tasks, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,true);
+    hasSections = false;
+    drawTasks(svg, tasks, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,maxEventLineLength,maxSectionHeight,true);
   }
 
+// Get BBox of the diagram
+  const box = svg.node().getBBox();
+  log.info('bounds', box);
 
-
-
-  // draw tasks
-  //drawTasks(svg, tasks, 0);
-
-  const box = bounds.getBounds();
   if (title) {
     svg
       .append('text')
       .text(title)
-      .attr('x', LEFT_MARGIN)
+      .attr('x', (box.width/2)-LEFT_MARGIN)
       .attr('font-size', '4ex')
       .attr('font-weight', 'bold')
-      .attr('y', 25);
+      .attr('y', 20);
   }
-
-  const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
-  const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;
-
-// Setup the view box and size of the svg element
-  setupGraphViewbox(undefined, svg, conf.timeline.padding, conf.timeline.useMaxWidth);
-
   //5. Draw the diagram
- const maxTaskLength = 500;
-
+ depthY = hasSections?maxSectionHeight + maxTaskHeight + 150: maxTaskHeight + 100;
  // Draw activity line
   svg
     .append('line')
     .attr('x1', LEFT_MARGIN)
-    .attr('y1', maxSectionHeight + maxTaskHeight +150) // One section head + one task + margins
-    .attr('x2', tasks && tasks.length? (tasks.length*200)+ 400 :  400) // Subtract stroke width so arrow point is retained
-    .attr('y2', maxSectionHeight + maxTaskHeight +150)
+    .attr('y1', depthY) // One section head + one task + margins
+    .attr('x2', (box.width)+3*LEFT_MARGIN) // Subtract stroke width so arrow point is retained
+    .attr('y2', depthY)
     .attr('stroke-width', 4)
     .attr('stroke', 'black')
     .attr('marker-end', 'url(#arrowhead)');
 
-  const extraVertForTitle = title ? 70 : 0;
-  svg.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`);
-  svg.attr('preserveAspectRatio', 'xMinYMin meet');
-  svg.attr('height', height + extraVertForTitle + 25);
+  // Setup the view box and size of the svg element
+  setupGraphViewbox(undefined, svg, conf.timeline.padding?conf.timeline.padding:50, conf.timeline.useMaxWidth?conf.timeline.useMaxWidth:false);
 
   // addSVGAccessibilityFields(diagObj.db, diagram, id);
 };
 
-export const bounds = {
-  data: {
-    startx: undefined,
-    stopx: undefined,
-    starty: undefined,
-    stopy: undefined,
-  },
-  verticalPos: 0,
-
-  sequenceItems: [],
-  init: function () {
-    this.sequenceItems = [];
-    this.data = {
-      startx: undefined,
-      stopx: undefined,
-      starty: undefined,
-      stopy: undefined,
-    };
-    this.verticalPos = 0;
-  },
-  updateVal: function (obj, key, val, fun) {
-    if (typeof obj[key] === 'undefined') {
-      obj[key] = val;
-    } else {
-      obj[key] = fun(val, obj[key]);
-    }
-  },
-  updateBounds: function (startx, starty, stopx, stopy) {
-    const conf = getConfig().timeline;
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const _self = this;
-    let cnt = 0;
-    /** @param {any} type */
-    function updateFn(type) {
-      return function updateItemBounds(item) {
-        cnt++;
-        // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
-        const n = _self.sequenceItems.length - cnt + 1;
-        _self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min);
-        _self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max);
-
-        _self.updateVal(bounds.data, 'startx', startx - n * conf.boxMargin, Math.min);
-        _self.updateVal(bounds.data, 'stopx', stopx + n * conf.boxMargin, Math.max);
-
-        if (!(type === 'activation')) {
-          _self.updateVal(item, 'startx', startx - n * conf.boxMargin, Math.min);
-          _self.updateVal(item, 'stopx', stopx + n * conf.boxMargin, Math.max);
-
-          _self.updateVal(bounds.data, 'starty', starty - n * conf.boxMargin, Math.min);
-          _self.updateVal(bounds.data, 'stopy', stopy + n * conf.boxMargin, Math.max);
-        }
-      };
-    }
-
-    this.sequenceItems.forEach(updateFn());
-  },
-  insert: function (startx, starty, stopx, stopy) {
-    const _startx = Math.min(startx, stopx);
-    const _stopx = Math.max(startx, stopx);
-    const _starty = Math.min(starty, stopy);
-    const _stopy = Math.max(starty, stopy);
-
-    this.updateVal(bounds.data, 'startx', _startx, Math.min);
-    this.updateVal(bounds.data, 'starty', _starty, Math.min);
-    this.updateVal(bounds.data, 'stopx', _stopx, Math.max);
-    this.updateVal(bounds.data, 'stopy', _stopy, Math.max);
-
-    this.updateBounds(_startx, _starty, _stopx, _stopy);
-  },
-  bumpVerticalPos: function (bump) {
-    this.verticalPos = this.verticalPos + bump;
-    this.data.stopy = this.verticalPos;
-  },
-  getVerticalPos: function () {
-    return this.verticalPos;
-  },
-  getBounds: function () {
-    return this.data;
-  },
-};
-
-
-
-export const drawTasks = function (diagram, tasks, sectionColor, masterX, masterY, maxTaskHeight,conf,maxEventCount, isWithoutSections) {
-
-  const taskBeginY = masterY;
-
-  const taskBeginX = masterX;
 
+export const drawTasks = function (diagram, tasks, sectionColor, masterX, masterY, maxTaskHeight,conf,maxEventCount,maxEventLineLength,maxSectionHeight, isWithoutSections) {
   // Draw the tasks
   for (let i = 0; i < tasks.length; i++) {
 
@@ -336,22 +246,18 @@ export const drawTasks = function (diagram, tasks, sectionColor, masterX, master
     if (task.events) {
     // draw a line between the task and the events
       const lineWrapper = diagram.append('g').attr('class', 'lineWrapper');
-
       let linelength = maxTaskHeight;
-
-
-
     //add margin to task
     masterY += 100;
      linelength = linelength+ drawEvents(diagram, task.events, sectionColor, masterX, masterY, conf);
-      masterY -= 100;
+    masterY -= 100;
 
       lineWrapper
     .append('line')
     .attr('x1', masterX + 190/2)
     .attr('y1', masterY + maxTaskHeight) // One section head + one task + margins
     .attr('x2', masterX + 190/2) // Subtract stroke width so arrow point is retained
-    .attr('y2', masterY  + linelength + maxEventCount * 100)
+    .attr('y2', masterY + maxTaskHeight + (isWithoutSections?maxTaskHeight:maxSectionHeight) + maxEventLineLength+ 120)
     .attr('stroke-width', 2)
     .attr('stroke', 'black')
     .attr('marker-end', 'url(#arrowhead)')
@@ -361,7 +267,7 @@ export const drawTasks = function (diagram, tasks, sectionColor, masterX, master
 
 
     masterX = masterX + 200;
-    if (isWithoutSections) {
+    if (isWithoutSections && !getConfig().timeline.disableMulticolor) {
        sectionColor++;
   }
   }
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index a2349c255..e509962f6 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -43,7 +43,7 @@ export class Diagram {
     this.parser.parser.yy = this.db;
     if (diagram.init) {
       diagram.init(cnf);
-      log.debug('Initialized diagram ' + this.type, cnf);
+      log.info('Initialized diagram ' + this.type, cnf);
     }
     this.txt += '\n';
 

From 6ab7eb55cb299ee11fe57afa352007f88b0b17fa Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Thu, 15 Dec 2022 20:14:49 +0100
Subject: [PATCH 04/26] Updated styling and added documentation

---
 .vite/build.ts                                |   2 +-
 packages/mermaid-timeline/src/mermaidUtils.ts |  12 +-
 packages/mermaid-timeline/src/styles.js       |   5 +-
 .../mermaid-timeline/src/timelineRenderer.ts  |  17 +-
 .../mermaid/src/docs/.vitepress/config.ts     |   1 +
 .../src/docs/.vitepress/theme/mermaid.ts      |   3 +-
 packages/mermaid/src/docs/syntax/timeline.md  | 300 ++++++++++++++++++
 packages/mermaid/src/docs/vite.config.ts      |   4 +
 8 files changed, 325 insertions(+), 19 deletions(-)
 create mode 100644 packages/mermaid/src/docs/syntax/timeline.md

diff --git a/.vite/build.ts b/.vite/build.ts
index 1e9f12a41..45c96cb2f 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -44,7 +44,7 @@ const packageOptions = {
   'mermaid-timeline': {
     name: 'mermaid-timeline',
     packageName: 'mermaid-timeline',
-    file: 'diagram-definition.ts',
+    file: 'detector.ts',
   },
   // 'mermaid-timeline-detector': {
   //   name: 'mermaid-timeline-detector',
diff --git a/packages/mermaid-timeline/src/mermaidUtils.ts b/packages/mermaid-timeline/src/mermaidUtils.ts
index 7dc3732a8..1061f87cf 100644
--- a/packages/mermaid-timeline/src/mermaidUtils.ts
+++ b/packages/mermaid-timeline/src/mermaidUtils.ts
@@ -39,12 +39,12 @@ export let setupGraphViewbox: (
 
 /**
  * Function called by mermaid that injects utility functions that help the diagram to be a good citizen.
- * @param _log
- * @param _setLogLevel
- * @param _getConfig
- * @param _sanitizeText
- * @param _setupGraphViewbox
- * @param _commonDb
+ * @param _log - The log function to use
+ * @param _setLogLevel - The function to set the log level
+ * @param _getConfig - The function to get the configuration
+ * @param _sanitizeText - The function to sanitize text
+ * @param _setupGraphViewbox - The function to setup the graph view-box
+ * @param _commonDb - The common database
  */
 export const injectUtils = (
   _log: Record,
diff --git a/packages/mermaid-timeline/src/styles.js b/packages/mermaid-timeline/src/styles.js
index 51d69f58d..fd9526e98 100644
--- a/packages/mermaid-timeline/src/styles.js
+++ b/packages/mermaid-timeline/src/styles.js
@@ -38,6 +38,10 @@ const genSections = (options) => {
       stroke-width: 3;
     }
 
+    .lineWrapper line{
+      stroke: ${options['cScaleLabel' + i]} ;
+    }
+
     .disabled, .disabled circle, .disabled text {
       fill: lightgray;
     }
@@ -72,7 +76,6 @@ const getStyles = (options) =>
   }
   .eventWrapper  {
    filter: brightness(120%);
-
   }
 `;
 export default getStyles;
diff --git a/packages/mermaid-timeline/src/timelineRenderer.ts b/packages/mermaid-timeline/src/timelineRenderer.ts
index 6fd68cf60..063d070a7 100644
--- a/packages/mermaid-timeline/src/timelineRenderer.ts
+++ b/packages/mermaid-timeline/src/timelineRenderer.ts
@@ -1,7 +1,6 @@
 // @ts-nocheck TODO: fix file
 import { select } from 'd3';
 import svgDraw from './svgDraw';
-import { configureSvgSize } from '../../setupGraphViewbox';
 import addSVGAccessibilityFields from '../../accessibility';
 
 import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
@@ -91,8 +90,7 @@ export const draw = function (text, id, version, diagObj) {
   log.info('tasks.length', tasks.length);
    //calculate max task height
   // for loop till tasks.length
-  for (let i = 0; i < tasks.length; i++) {
-    const task = tasks[i];
+  for (const [i, task] of tasks.entries()) {
 
     const taskNode = {
       number: i,
@@ -190,9 +188,11 @@ export const draw = function (text, id, version, diagObj) {
       .attr('y', 20);
   }
   //5. Draw the diagram
- depthY = hasSections?maxSectionHeight + maxTaskHeight + 150: maxTaskHeight + 100;
+  depthY = hasSections ? maxSectionHeight + maxTaskHeight + 150 : maxTaskHeight + 100;
+
+   const lineWrapper = svg.append('g').attr('class', 'lineWrapper');
  // Draw activity line
-  svg
+  lineWrapper
     .append('line')
     .attr('x1', LEFT_MARGIN)
     .attr('y1', depthY) // One section head + one task + margins
@@ -211,9 +211,7 @@ export const draw = function (text, id, version, diagObj) {
 
 export const drawTasks = function (diagram, tasks, sectionColor, masterX, masterY, maxTaskHeight,conf,maxEventCount,maxEventLineLength,maxSectionHeight, isWithoutSections) {
   // Draw the tasks
-  for (let i = 0; i < tasks.length; i++) {
-
-    const task = tasks[i];
+  for (const task of tasks) {
     // create node from task
     const taskNode = {
       descr: task.task,
@@ -283,8 +281,7 @@ export const drawEvents = function (diagram, events, sectionColor, masterX, mast
   const eventBeginY = masterY;
   masterY = masterY + 100
   // Draw the events
-  for (let i = 0; i < events.length; i++) {
-    const event = events[i];
+  for (const event of events) {
     // create node from event
     const eventNode = {
       descr: event,
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 216541d52..74ed5e42c 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -107,6 +107,7 @@ function sidebarSyntax() {
         { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' },
         { text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
         { text: 'Mindmaps 🔥', link: '/syntax/mindmap' },
+        { text: 'Timeline 🔥', link: '/syntax/timeline' },
         { text: 'Other Examples', link: '/syntax/examples' },
       ],
     },
diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
index b287346f9..556eac4f5 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -1,8 +1,9 @@
 import mermaid, { type MermaidConfig } from 'mermaid';
 import mindmap from '@mermaid-js/mermaid-mindmap';
+import timeline from '@mermaid-js/mermaid-timeline';
 
 try {
-  await mermaid.registerExternalDiagrams([mindmap]);
+  await mermaid.registerExternalDiagrams([mindmap,timeline]);
 } catch (e) {
   console.error(e);
 }
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
new file mode 100644
index 000000000..571072ec9
--- /dev/null
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -0,0 +1,300 @@
+# Timeline Diagram
+
+> Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
+
+"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia
+
+### An example of a timeline.
+
+```mermaid
+timeline
+    title History of Social Media Platform
+    2002 : LinkedIn
+    2004 : Facebook : Google
+    2005 : Youtube
+    2006 : Twitter
+    2007 : Tumblr
+    2008 : Instagram
+    2010 : Pinterest
+```
+
+
+## Syntax
+
+The syntax for creating Timeline diagram is simple. You always start with the `timeline` keyword to let mermaid know that you want to create a timeline diagram.
+
+After that there is a possibility to add a title to the timeline. This is done by adding a line with the keyword `title` followed by the title text.
+
+Then you add the timeline data, where you always start with a time period, followed by a colon and then the text for the event. Optionally you can add a second colon and then the text for the event. So, you can have one or more events per time period.
+
+
+```json
+{time period} : {event}
+```
+or
+```json
+{time period} : {event} : {event}
+```
+or
+```json
+{time period} : {event}
+              : {event}
+              : {event}
+```
+
+NOTE: Both time period and event are simple text, and not limited to numbers.
+
+
+Let us look at the syntax for the example above.
+
+```mermaid-example
+timeline
+    title History of Social Media Platform
+    2002 : LinkedIn
+    2004 : Facebook : Google
+    2005 : Youtube
+    2006 : Twitter
+    2007 : Tumblr
+    2008 : Instagram
+    2010 : Pinterest
+```
+
+In this way we can use a text outline to generate a timeline diagram.
+The sequence of time period and events is important, as it will be used to draw the timeline. The first time period will be placed at the left side of the timeline, and the last time period will be placed at the right side of the timeline.
+
+Similarly, the first event will be placed at the top for that specific time period, and the last event will be placed at the bottom.
+
+## Grouping of time periods in sections/ages
+You can group time periods in sections/ages. This is done by adding a line with the keyword `section` followed by the section name.
+
+All subsequent time periods will be placed in this section until a new section is defined.
+
+If no section is defined, all time periods will be placed in the default section.
+
+Let us look at an example, where we have grouped the time periods in sections.
+
+```mermaid-example
+timeline
+    title Timeline of Industrial Revolution
+    section 17th-20th century
+        Industry 1.0 : Machinery, Water power, Steam 
power
+        Industry 2.0 : Electricity, Internal combustion engine, Mass production
+        Industry 3.0 : Electronics, Computers, Automation
+    section 21st century
+        Industry 4.0 : Internet, Robotics, Internet of Things
+        Industry 5.0 : Artificial intelligence, Big data,3D printing
+        Industry 6.0 : Quantum computing, Nanotechnology : Human-Cyber Interface
+```
+As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.
+
+All time periods and events under a given section follow a similar color scheme. This is done to make it easier to see the relationship between time periods and events.
+
+
+## Wrapping of text for long time-periods or events
+By default, the text for time-periods and events will be wrapped if it is too long. This is done to avoid that the text is drawn outside the diagram.
+
+You can also use `
` to force a line break.
+
+Let us look at another example, where we have a long time period, and a long event.
+
+```mermaid-example
+timeline
+        title England's History Timeline
+        section Stone Age
+          7600 BC : Britain's oldest known house was built in Orkney, Scotland
+          6000 BC : Sea levels rise and Britain becomes an island.
 The people who live here are hunter-gatherers.
+        section Broze Age
+          2300 BC : People arrive from Europe and settle in Britain. 
They bring farming and metalworking.
+                  : New styles of pottery and ways of burying the dead appear.
+          2200 BC : The last major building works are completed at Stonehenge.
 People now bury their dead in stone circles.
+                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
+
+```
+
+
+## Styling of time periods and events
+As explained earlier, each section has a color scheme, and each time period and event under a section follow the similar color scheme.
+
+However, if there is no section defined, then we have two possibilities:
+
+1. Style time periods individually, i.e. each time period(and its coressponding events) will have its own color scheme. This is the DEFAULT behavior.
+```mermaid-example
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+```
+Note that this is no, section defined, and each time period and its corresponding events will have its own color scheme.
+
+2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
+
+You will need to add this option either via mermaid.intialize function or directives.
+
+```javascript
+mermaid.initialize({
+        theme: 'base',
+        startOnLoad: true,
+        logLevel: 0,
+        timeline: {
+          disableMulticolor: false,
+        },
+        ...
+        ...
+```
+
+let us look at same example, where we have disabled the multiColor option.
+```mermaid-example
+   %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+```
+### Customizing Color scheme
+
+You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
+In case you have more than 12 sections, the color scheme will start to repeat.
+
+NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
+
+Example:
+
+Now let's override the default values for the `cScale0` to `cScale2` variables:
+
+```mermaid-example
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'cScale0': '#ff0000',
+              'cScale1': '#00ff00',
+              'cScale2': '#0000ff',
+       } } }%%
+       timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+
+```
+
+See how the colors are changed to the values specified in the theme variables.
+
+
+## Themes
+Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
+
+The following are the different pre-defined theme options:
+
+- `base`
+- `forest`
+- `dark`
+- `default`
+- `neutral`
+
+**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](../config/directives.md)
+Let's put them to use, and see how our sample diagram looks in different themes:
+
+### Base Theme
+
+```mermaid-example
+%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+```
+
+### Forest Theme
+
+```mermaid-example
+%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+```
+
+### Dark Theme
+
+```mermaid-example
+%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+```
+
+### Default Theme
+
+```mermaid-example
+%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+```
+
+### Neutral Theme
+
+```mermaid-example
+%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+```
+
+
+
+
+
+## Integrating with your library/website.
+
+Timeline uses the experimental lazy loading & async rendering features which could change in the future.
+
+```html
+
+```
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/packages/mermaid/src/docs/vite.config.ts b/packages/mermaid/src/docs/vite.config.ts
index 15652c21c..a1d92c736 100644
--- a/packages/mermaid/src/docs/vite.config.ts
+++ b/packages/mermaid/src/docs/vite.config.ts
@@ -36,6 +36,10 @@ export default defineConfig({
         __dirname,
         '../../../mermaid-mindmap/dist/mermaid-mindmap.esm.min.mjs'
       ), // Use this one to build
+      '@mermaid-js/mermaid-timeline': path.join(
+        __dirname,
+        '../../../mermaid-timeline/dist/mermaid-timeline.esm.min.mjs'
+      ),
     },
   },
   server: {

From 61ef4692b0ecd5cd9255212f266652b42ce6595a Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Thu, 15 Dec 2022 20:24:13 +0100
Subject: [PATCH 05/26] Updated documentation and examples

---
 packages/mermaid/src/docs/syntax/timeline.md | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index 571072ec9..3438b4542 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -13,9 +13,6 @@ timeline
     2004 : Facebook : Google
     2005 : Youtube
     2006 : Twitter
-    2007 : Tumblr
-    2008 : Instagram
-    2010 : Pinterest
 ```
 
 
@@ -54,9 +51,6 @@ timeline
     2004 : Facebook : Google
     2005 : Youtube
     2006 : Twitter
-    2007 : Tumblr
-    2008 : Instagram
-    2010 : Pinterest
 ```
 
 In this way we can use a text outline to generate a timeline diagram.
@@ -83,7 +77,6 @@ timeline
     section 21st century
         Industry 4.0 : Internet, Robotics, Internet of Things
         Industry 5.0 : Artificial intelligence, Big data,3D printing
-        Industry 6.0 : Quantum computing, Nanotechnology : Human-Cyber Interface
 ```
 As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.
 
@@ -125,9 +118,7 @@ However, if there is no section defined, then we have two possibilities:
           2004 : Facebook : Google
           2005 : Youtube
           2006 : Twitter
-          2007 : Tumblr
-          2008 : Instagram
-          2010 : Pinterest
+
 ```
 Note that this is no, section defined, and each time period and its corresponding events will have its own color scheme.
 
@@ -156,9 +147,7 @@ let us look at same example, where we have disabled the multiColor option.
           2004 : Facebook : Google
           2005 : Youtube
           2006 : Twitter
-          2007 : Tumblr
-          2008 : Instagram
-          2010 : Pinterest
+
 ```
 ### Customizing Color scheme
 
@@ -292,7 +281,7 @@ Timeline uses the experimental lazy loading & async rendering features which cou
 ```html
 
 ```

From 652a42fe1aed7911a781a84716940a973b995639 Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Thu, 19 Jan 2023 19:03:05 +0100
Subject: [PATCH 06/26] Add directive parsing functionality to timeline diagram

---
 cypress/platform/ashish2.html                 | 36 ++++----
 packages/mermaid-timeline/src/mermaidUtils.ts | 10 ++-
 packages/mermaid-timeline/src/timelineDb.js   | 13 ++-
 .../mermaid-timeline/src/timelineRenderer.ts  |  3 +-
 packages/mermaid/src/config.type.ts           |  1 +
 packages/mermaid/src/defaultConfig.ts         |  3 +
 .../mermaid/src/diagram-api/diagramAPI.ts     |  8 +-
 packages/mermaid/src/diagram-api/types.ts     |  4 +-
 packages/mermaid/src/directiveUtils.ts        | 84 +++++++++++++++++++
 packages/mermaid/src/mermaidAPI.ts            | 77 +----------------
 10 files changed, 136 insertions(+), 103 deletions(-)
 create mode 100644 packages/mermaid/src/directiveUtils.ts

diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html
index f1ebaa827..f77f95606 100644
--- a/cypress/platform/ashish2.html
+++ b/cypress/platform/ashish2.html
@@ -55,7 +55,7 @@
   
   
     
Security check

-    
+    
  timeline
         title My day
         section section with no tasks
@@ -71,7 +71,7 @@
           I am a big big big tasks
           I am not so big tasks
     

-     
+     
  timeline
         title England's History Timeline
         section Stone Age
@@ -85,21 +85,7 @@
 
     

     
- timeline
-        title History of Social Media Platform
-        section Rise of Social Media
-          2002 : LinkedIn
-          2004 : Facebook : Google : Pixar
-          2005 : Youtube
-          2006 : Twitter
-          2007 : Tumblr
-          2008s : Instagram
-          2010 : Pinterest
-    

-    
----
-timeline:disableMulticolor: true
----
+      %%{init: { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
  timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -111,6 +97,22 @@ timeline:disableMulticolor: true
           2010 : Pinterest
     

     
+      %%{init: { 'logLevel': 'debug', 'theme': 'default', 'themeVariables': {
+              'cScale0': '#ffffff',
+              'cScale1': '#00ff00',
+              'cScale2': '#0000ff',
+              } } }%%
+ timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google : Pixar
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008s : Instagram
+          2010 : Pinterest
+    

+    
  timeline
         title History of Social Media Platform
           2002 : LinkedIn
diff --git a/packages/mermaid-timeline/src/mermaidUtils.ts b/packages/mermaid-timeline/src/mermaidUtils.ts
index 1061f87cf..af3f97571 100644
--- a/packages/mermaid-timeline/src/mermaidUtils.ts
+++ b/packages/mermaid-timeline/src/mermaidUtils.ts
@@ -23,7 +23,10 @@ export const log: Record = {
 export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
 export let getConfig: () => object;
 export let sanitizeText: (str: string) => string;
-export const getCommonDb=() => localCommonDb;
+export const getCommonDb = () => localCommonDb;
+export let parseDirective = (p: any, statement: string, context: string, type: string) => {
+  return;
+}
 /**
  * Placeholder for the real function that will be injected by mermaid.
  */
@@ -52,9 +55,11 @@ export const injectUtils = (
   _getConfig: any,
   _sanitizeText: any,
   _setupGraphViewbox: any,
-  _commonDb: any
+  _commonDb: any,
+  _parseDirective: any
 ) => {
   _log.info('Mermaid utils injected into timeline-diagram');
+  _log.info('123 ' , _parseDirective);
   log.trace = _log.trace;
   log.debug = _log.debug;
   log.info = _log.info;
@@ -66,5 +71,6 @@ export const injectUtils = (
   sanitizeText = _sanitizeText;
   setupGraphViewbox = _setupGraphViewbox;
   localCommonDb = _commonDb;
+  parseDirective = _parseDirective;
 
 };
diff --git a/packages/mermaid-timeline/src/timelineDb.js b/packages/mermaid-timeline/src/timelineDb.js
index dda3a97cb..e5de2aee3 100644
--- a/packages/mermaid-timeline/src/timelineDb.js
+++ b/packages/mermaid-timeline/src/timelineDb.js
@@ -1,4 +1,4 @@
-import { getCommonDb as _getCommonDb,log  } from './mermaidUtils';
+import { getCommonDb as _getCommonDb, parseDirective as _parseDirective ,log  } from './mermaidUtils';
 
 let currentSection = '';
 let currentTaskId = 0;
@@ -9,6 +9,10 @@ const rawTasks = [];
 
 export const getCommonDb = _getCommonDb;
 
+export const parseDirective = ( statement, context, type) => {
+  _parseDirective(this, statement, context, type);
+};
+
 export const clear = function () {
   sections.length = 0;
   tasks.length = 0;
@@ -79,14 +83,14 @@ const compileTasks = function () {
   };
 
   let allProcessed = true;
-  for (let i = 0; i < rawTasks.length; i++) {
+  for (const [i, rawTask] of rawTasks.entries()) {
     compileTask(i);
 
-    allProcessed = allProcessed && rawTasks[i].processed;
+    allProcessed = allProcessed && rawTask.processed;
   }
   return allProcessed;
 };
-
+log.info('456 parseDirective',parseDirective);
 export default {
   clear,
   getCommonDb,
@@ -96,5 +100,6 @@ export default {
   addTask,
   addTaskOrg,
   addEvent,
+  parseDirective
 };
 
diff --git a/packages/mermaid-timeline/src/timelineRenderer.ts b/packages/mermaid-timeline/src/timelineRenderer.ts
index 063d070a7..5ed6c554e 100644
--- a/packages/mermaid-timeline/src/timelineRenderer.ts
+++ b/packages/mermaid-timeline/src/timelineRenderer.ts
@@ -17,7 +17,8 @@ export const draw = function (text, id, version, diagObj) {
   //1. Fetch the configuration
   const conf = getConfig();
   const LEFT_MARGIN = conf.leftMargin?conf.leftMargin:50;
-
+  //log conf
+  log.info('conf', conf);
   //2. Clear the diagram db before parsing
   diagObj.db.clear();
 
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 63fe078fa..474075824 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -314,6 +314,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig {
   actorColours?: string[];
   sectionFills?: string[];
   sectionColours?: string[];
+  disableMulticolor?: boolean;
 }
 
 export interface GanttDiagramConfig extends BaseDiagramConfig {
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 5bb4a1bd8..cee89e4aa 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -984,6 +984,8 @@ const config: Partial = {
      */
     useMaxWidth: true,
 
+
+
     /**
      * | Parameter   | Description                       | Type | Required | Values      |
      * | ----------- | --------------------------------- | ---- | -------- | ----------- |
@@ -1009,6 +1011,7 @@ const config: Partial = {
 
     sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
     sectionColours: ['#fff'],
+    disableMulticolor: false,
   },
   class: {
     /**
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index ddb22df2c..574e72fbc 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -5,7 +5,8 @@ import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
 import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
 import { addStylesForDiagram } from '../styles';
 import { DiagramDefinition, DiagramDetector } from './types';
-import  * as  _commonDb  from '../commonDb';
+import * as  _commonDb from '../commonDb';
+import { parseDirective as _parseDirective} from '../directiveUtils';
 
 
 /*
@@ -19,6 +20,7 @@ export const getConfig = _getConfig;
 export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
 export const setupGraphViewbox = _setupGraphViewbox;
 export const getCommonDb = () => { return _commonDb };
+export const parseDirective =  (p: any, statement: string, context: string, type: string)=>_parseDirective(p, statement, context, type);
 
 const diagrams: Record = {};
 export interface Detectors {
@@ -49,7 +51,9 @@ export const registerDiagram = (
   addStylesForDiagram(id, diagram.styles);
 
   if (diagram.injectUtils) {
-    diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox,getCommonDb());
+    console.log('parseDirective', parseDirective);
+
+    diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox,getCommonDb(),parseDirective);
   }
 };
 
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 22b4c1c8c..883cf3987 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -7,6 +7,7 @@ export interface InjectUtils {
   _sanitizeText: any;
   _setupGraphViewbox: any;
   _commonDb: any;
+  _parseDirective: any;
 }
 
 /**
@@ -31,7 +32,8 @@ export interface DiagramDefinition {
     _getConfig: InjectUtils['_getConfig'],
     _sanitizeText: InjectUtils['_sanitizeText'],
     _setupGraphViewbox: InjectUtils['_setupGraphViewbox'],
-    _commonDb: InjectUtils['_commonDb']
+    _commonDb: InjectUtils['_commonDb'],
+    _parseDirective: InjectUtils['_parseDirective'],
   ) => void;
 }
 
diff --git a/packages/mermaid/src/directiveUtils.ts b/packages/mermaid/src/directiveUtils.ts
new file mode 100644
index 000000000..79888daf9
--- /dev/null
+++ b/packages/mermaid/src/directiveUtils.ts
@@ -0,0 +1,84 @@
+
+
+import * as configApi from './config';
+
+import { log } from './logger';
+import { directiveSanitizer } from './utils';
+
+let currentDirective: { type?: string; args?: any } | undefined = {};
+
+export const parseDirective = function (p: any, statement: string, context: string, type: string): void {
+  log.info('parseDirective is being called', statement, context, type);
+  try {
+    if (statement !== undefined) {
+      statement = statement.trim();
+      switch (context) {
+        case 'open_directive':
+          currentDirective = {};
+          break;
+        case 'type_directive':
+          if (!currentDirective) {
+            throw new Error('currentDirective is undefined');
+          }
+          currentDirective.type = statement.toLowerCase();
+          break;
+        case 'arg_directive':
+          if (!currentDirective) {
+            throw new Error('currentDirective is undefined');
+          }
+          currentDirective.args = JSON.parse(statement);
+          break;
+        case 'close_directive':
+          handleDirective(p, currentDirective, type);
+          currentDirective = undefined;
+          break;
+      }
+    }
+  } catch (error) {
+    log.error(
+      `Error while rendering sequenceDiagram directive: ${statement} jison context: ${context}`
+    );
+    // @ts-ignore: TODO Fix ts errors
+    log.error(error.message);
+  }
+};
+
+const handleDirective = function (p: any, directive: any, type: string): void {
+  log.info(`Directive type=${directive.type} with args:`, directive.args);
+  switch (directive.type) {
+    case 'init':
+    case 'initialize': {
+      ['config'].forEach((prop) => {
+        if (directive.args[prop] !== undefined) {
+          if (type === 'flowchart-v2') {
+            type = 'flowchart';
+          }
+          directive.args[type] = directive.args[prop];
+          delete directive.args[prop];
+        }
+      });
+      log.info('sanitize in handleDirective', directive.args);
+      directiveSanitizer(directive.args);
+      log.info('sanitize in handleDirective (done)', directive.args);
+      configApi.addDirective(directive.args);
+      break;
+    }
+    case 'wrap':
+    case 'nowrap':
+      if (p && p['setWrap']) {
+        p.setWrap(directive.type === 'wrap');
+      }
+      break;
+    case 'themeCss':
+      log.warn('themeCss encountered');
+      break;
+    default:
+      log.warn(
+        `Unhandled directive: source: '%%{${directive.type}: ${JSON.stringify(
+          directive.args ? directive.args : {}
+        )}}%%`,
+        directive
+      );
+      break;
+  }
+};
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 5bf11fad1..ed2f547e9 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -31,6 +31,7 @@ import { MermaidConfig } from './config.type';
 import { evaluate } from './diagrams/common/common';
 import isEmpty from 'lodash-es/isEmpty.js';
 import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
+import { parseDirective } from './directiveUtils';
 
 // diagram names that support classDef statements
 const CLASSDEF_DIAGRAMS = ['graph', 'flowchart', 'flowchart-v2', 'stateDiagram', 'stateDiagram-v2'];
@@ -777,82 +778,6 @@ const renderAsync = async function (
   return svgCode;
 };
 
-let currentDirective: { type?: string; args?: any } | undefined = {};
-
-const parseDirective = function (p: any, statement: string, context: string, type: string): void {
-  try {
-    if (statement !== undefined) {
-      statement = statement.trim();
-      switch (context) {
-        case 'open_directive':
-          currentDirective = {};
-          break;
-        case 'type_directive':
-          if (!currentDirective) {
-            throw new Error('currentDirective is undefined');
-          }
-          currentDirective.type = statement.toLowerCase();
-          break;
-        case 'arg_directive':
-          if (!currentDirective) {
-            throw new Error('currentDirective is undefined');
-          }
-          currentDirective.args = JSON.parse(statement);
-          break;
-        case 'close_directive':
-          handleDirective(p, currentDirective, type);
-          currentDirective = undefined;
-          break;
-      }
-    }
-  } catch (error) {
-    log.error(
-      `Error while rendering sequenceDiagram directive: ${statement} jison context: ${context}`
-    );
-    // @ts-ignore: TODO Fix ts errors
-    log.error(error.message);
-  }
-};
-
-const handleDirective = function (p: any, directive: any, type: string): void {
-  log.debug(`Directive type=${directive.type} with args:`, directive.args);
-  switch (directive.type) {
-    case 'init':
-    case 'initialize': {
-      ['config'].forEach((prop) => {
-        if (directive.args[prop] !== undefined) {
-          if (type === 'flowchart-v2') {
-            type = 'flowchart';
-          }
-          directive.args[type] = directive.args[prop];
-          delete directive.args[prop];
-        }
-      });
-      log.debug('sanitize in handleDirective', directive.args);
-      directiveSanitizer(directive.args);
-      log.debug('sanitize in handleDirective (done)', directive.args);
-      configApi.addDirective(directive.args);
-      break;
-    }
-    case 'wrap':
-    case 'nowrap':
-      if (p && p['setWrap']) {
-        p.setWrap(directive.type === 'wrap');
-      }
-      break;
-    case 'themeCss':
-      log.warn('themeCss encountered');
-      break;
-    default:
-      log.warn(
-        `Unhandled directive: source: '%%{${directive.type}: ${JSON.stringify(
-          directive.args ? directive.args : {}
-        )}}%%`,
-        directive
-      );
-      break;
-  }
-};
 
 /**
  * @param  options - Initial Mermaid options

From be818ad57f45cbaa3969ffa4509290e5081b70b4 Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Thu, 19 Jan 2023 20:30:11 +0100
Subject: [PATCH 07/26] Pushing fix for broken themeVariable functionality

---
 cypress/platform/ashish2.html                 | 29 +++++++++++---
 packages/mermaid-timeline/src/mermaidUtils.ts |  3 +-
 packages/mermaid-timeline/src/svgDraw.js      |  2 +-
 packages/mermaid-timeline/src/timelineDb.js   |  2 +-
 .../mermaid-timeline/src/timelineRenderer.ts  | 38 ++++++++-----------
 .../mermaid/src/diagram-api/diagramAPI.ts     |  2 -
 packages/mermaid/src/directiveUtils.ts        |  2 +-
 packages/mermaid/src/docs/syntax/timeline.md  |  4 +-
 packages/mermaid/src/themes/theme-default.js  |  4 +-
 9 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html
index f77f95606..c6dfdc6b0 100644
--- a/cypress/platform/ashish2.html
+++ b/cypress/platform/ashish2.html
@@ -84,8 +84,8 @@
                   : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
 
     

-    
-      %%{init: { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
+    
+      %%{'init': { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
  timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -97,10 +97,10 @@
           2010 : Pinterest
     

     
-      %%{init: { 'logLevel': 'debug', 'theme': 'default', 'themeVariables': {
-              'cScale0': '#ffffff',
+      %%{init: { 'logLevel': 'debug', 'theme': 'base', 'themeVariables': {
+              'cScale0': '#ff0000',
               'cScale1': '#00ff00',
-              'cScale2': '#0000ff',
+              'cScale2': '#ff0000'
               } } }%%
  timeline
         title History of Social Media Platform
@@ -112,6 +112,25 @@
           2008s : Instagram
           2010 : Pinterest
     

+
+    
+          %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'cScale0': '#ff0000',
+              'cScale1': '#00ff00',
+              'cScale2': '#0000ff'
+       } } }%%
+       timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+
+    

+
     
  timeline
         title History of Social Media Platform
diff --git a/packages/mermaid-timeline/src/mermaidUtils.ts b/packages/mermaid-timeline/src/mermaidUtils.ts
index af3f97571..b733507ed 100644
--- a/packages/mermaid-timeline/src/mermaidUtils.ts
+++ b/packages/mermaid-timeline/src/mermaidUtils.ts
@@ -58,8 +58,7 @@ export const injectUtils = (
   _commonDb: any,
   _parseDirective: any
 ) => {
-  _log.info('Mermaid utils injected into timeline-diagram');
-  _log.info('123 ' , _parseDirective);
+  _log.debug('Mermaid utils injected into timeline-diagram');
   log.trace = _log.trace;
   log.debug = _log.debug;
   log.info = _log.info;
diff --git a/packages/mermaid-timeline/src/svgDraw.js b/packages/mermaid-timeline/src/svgDraw.js
index bed0e2942..88f90401c 100644
--- a/packages/mermaid-timeline/src/svgDraw.js
+++ b/packages/mermaid-timeline/src/svgDraw.js
@@ -519,7 +519,7 @@ export const drawNode = function (elem, node, fullSection, conf) {
     'class',
     (node.class ? node.class + ' ' : '') +
       'timeline-node ' +
-      (section < 0 ? 'section-root' : 'section-' + section)
+      ('section-' + section)
   );
   const bkgElem = nodeElem.append('g');
 
diff --git a/packages/mermaid-timeline/src/timelineDb.js b/packages/mermaid-timeline/src/timelineDb.js
index e5de2aee3..b92715fe9 100644
--- a/packages/mermaid-timeline/src/timelineDb.js
+++ b/packages/mermaid-timeline/src/timelineDb.js
@@ -90,7 +90,7 @@ const compileTasks = function () {
   }
   return allProcessed;
 };
-log.info('456 parseDirective',parseDirective);
+
 export default {
   clear,
   getCommonDb,
diff --git a/packages/mermaid-timeline/src/timelineRenderer.ts b/packages/mermaid-timeline/src/timelineRenderer.ts
index 5ed6c554e..86a83f674 100644
--- a/packages/mermaid-timeline/src/timelineRenderer.ts
+++ b/packages/mermaid-timeline/src/timelineRenderer.ts
@@ -1,8 +1,6 @@
 // @ts-nocheck TODO: fix file
 import { select } from 'd3';
 import svgDraw from './svgDraw';
-import addSVGAccessibilityFields from '../../accessibility';
-
 import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
 
 export const setConf = function (cnf) {
@@ -17,15 +15,14 @@ export const draw = function (text, id, version, diagObj) {
   //1. Fetch the configuration
   const conf = getConfig();
   const LEFT_MARGIN = conf.leftMargin?conf.leftMargin:50;
-  //log conf
-  log.info('conf', conf);
+
   //2. Clear the diagram db before parsing
   diagObj.db.clear();
 
   //3. Parse the diagram text
   diagObj.parser.parse(text + '\n');
 
-  log.info('timeline', diagObj.db);
+  log.debug('timeline', diagObj.db);
 
   const securityLevel = conf.securityLevel;
   // Handle root and Document for when rendering in sandbox mode
@@ -45,17 +42,14 @@ export const draw = function (text, id, version, diagObj) {
   //4. Fetch the diagram data
   const tasks = diagObj.db.getTasks();
   const title = diagObj.db.getCommonDb().getDiagramTitle();
-
-  //log tasks
-  log.info(tasks);
+  log.debug('task',tasks);
 
   //5. Initialize the diagram
   svgDraw.initGraphics(svg);
 
   // fetch Sections
   const sections = diagObj.db.getSections();
-  // log sections
-  log.info(sections);
+  log.debug('sections', sections);
 
   let maxSectionHeight = 0;
   let maxTaskHeight = 0;
@@ -81,14 +75,14 @@ export const draw = function (text, id, version, diagObj) {
       maxHeight: maxSectionHeight,
     };
     const sectionHeight = svgDraw.getVirtualNodeHeight(svg, sectionNode, conf);
-    log.info('sectionHeight before draw', sectionHeight);
+    log.debug('sectionHeight before draw', sectionHeight);
     maxSectionHeight = Math.max(maxSectionHeight, sectionHeight +20);
   });
 
 //tasks length and maxEventCount
   let maxEventCount = 0;
   let maxEventLineLength = 0;
-  log.info('tasks.length', tasks.length);
+  log.debug('tasks.length', tasks.length);
    //calculate max task height
   // for loop till tasks.length
   for (const [i, task] of tasks.entries()) {
@@ -102,7 +96,7 @@ export const draw = function (text, id, version, diagObj) {
       maxHeight: maxTaskHeight,
     };
     const taskHeight = svgDraw.getVirtualNodeHeight(svg, taskNode, conf);
-    log.info('taskHeight before draw', taskHeight);
+    log.debug('taskHeight before draw', taskHeight);
     maxTaskHeight = Math.max(maxTaskHeight, taskHeight + 20);
 
     //calculate maxEventCount
@@ -126,8 +120,8 @@ export const draw = function (text, id, version, diagObj) {
   }
 
 
-  log.info('maxSectionHeight before draw', maxSectionHeight);
-  log.info('maxTaskHeight before draw', maxTaskHeight);
+  log.debug('maxSectionHeight before draw', maxSectionHeight);
+  log.debug('maxTaskHeight before draw', maxTaskHeight);
 
   if (sections && sections.length > 0) {
     sections.forEach((section) => {
@@ -140,11 +134,10 @@ export const draw = function (text, id, version, diagObj) {
         padding: 20,
         maxHeight: maxSectionHeight,
       };
-      //log section node
-      log.info('sectionNode', sectionNode);
+      log.debug('sectionNode', sectionNode);
       const sectionNodeWrapper = svg.append('g');
       const node = svgDraw.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf);
-      log.info('sectionNode output', node);
+      log.debug('sectionNode output', node);
 
       sectionNodeWrapper.attr(
         'transform',
@@ -177,7 +170,7 @@ export const draw = function (text, id, version, diagObj) {
 
 // Get BBox of the diagram
   const box = svg.node().getBBox();
-  log.info('bounds', box);
+  log.debug('bounds', box);
 
   if (title) {
     svg
@@ -223,14 +216,13 @@ export const drawTasks = function (diagram, tasks, sectionColor, masterX, master
       maxHeight: maxTaskHeight,
     };
 
-    //log task node
-    log.info('taskNode', taskNode);
+    log.debug('taskNode', taskNode);
     // create task wrapper
     const taskWrapper = diagram.append('g').attr('class', 'taskWrapper');
     const node = svgDraw.drawNode(taskWrapper, taskNode, sectionColor, conf);
     const taskHeight = node.height;
     //log task height
-    log.info('taskHeight after draw', taskHeight);
+    log.debug('taskHeight after draw', taskHeight);
     taskWrapper.attr(
       'transform',
       `translate(${masterX}, ${masterY})`
@@ -294,7 +286,7 @@ export const drawEvents = function (diagram, events, sectionColor, masterX, mast
     };
 
     //log task node
-    log.info('eventNode', eventNode);
+    log.debug('eventNode', eventNode);
     // create event wrapper
     const eventWrapper = diagram.append('g').attr('class', 'eventWrapper');
     const node = svgDraw.drawNode(eventWrapper, eventNode, sectionColor, conf)
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index 574e72fbc..69c4d8110 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -51,8 +51,6 @@ export const registerDiagram = (
   addStylesForDiagram(id, diagram.styles);
 
   if (diagram.injectUtils) {
-    console.log('parseDirective', parseDirective);
-
     diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox,getCommonDb(),parseDirective);
   }
 };
diff --git a/packages/mermaid/src/directiveUtils.ts b/packages/mermaid/src/directiveUtils.ts
index 79888daf9..677647d44 100644
--- a/packages/mermaid/src/directiveUtils.ts
+++ b/packages/mermaid/src/directiveUtils.ts
@@ -8,7 +8,7 @@ import { directiveSanitizer } from './utils';
 let currentDirective: { type?: string; args?: any } | undefined = {};
 
 export const parseDirective = function (p: any, statement: string, context: string, type: string): void {
-  log.info('parseDirective is being called', statement, context, type);
+  log.debug('parseDirective is being called', statement, context, type);
   try {
     if (statement !== undefined) {
       statement = statement.trim();
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index 3438b4542..44b72bd79 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -140,7 +140,7 @@ mermaid.initialize({
 
 let us look at same example, where we have disabled the multiColor option.
 ```mermaid-example
-   %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}%%
+   %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -164,7 +164,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
     %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
               'cScale0': '#ff0000',
               'cScale1': '#00ff00',
-              'cScale2': '#0000ff',
+              'cScale2': '#0000ff'
        } } }%%
        timeline
         title History of Social Media Platform
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 969551ee6..4fb898040 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -122,6 +122,7 @@ class Theme {
   updateColors() {
     /* Color Scale */
     /* Each color-set will have a background, a foreground and a border color */
+
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;
@@ -138,10 +139,9 @@ class Theme {
     this['cScalePeer' + 2] = this['cScalePeer' + 2] || darken(this.tertiaryColor, 40);
     for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
       // Setup the peer color for the set, useful for borders
-      this['cScale' + i] = darken(this['cScale' + i], 10);
+       this['cScale' + i] = darken(this['cScale' + i], 10);
       this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 25);
     }
-
     // Setup the inverted color for the set
     for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
       this['cScaleInv' + i] = this['cScaleInv' + i] || adjust(this['cScale' + i], { h: 180 });

From e865368649aa3ad75c75b8e45cc1e31e090735a2 Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Thu, 19 Jan 2023 20:42:33 +0100
Subject: [PATCH 08/26] Updating version and clean up  package.json

---
 packages/mermaid-timeline/package.json | 25 +++++++------------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/packages/mermaid-timeline/package.json b/packages/mermaid-timeline/package.json
index 0c2ebf136..8447d1981 100644
--- a/packages/mermaid-timeline/package.json
+++ b/packages/mermaid-timeline/package.json
@@ -1,14 +1,14 @@
 {
   "name": "@mermaid-js/mermaid-timeline",
-  "version": "9.2.0-rc2",
-  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "dist/mermaid-timeline.core.mjs",
+  "version": "9.4.0",
+  "description": "Timeline diagram module for Mermaid.js.",
   "module": "dist/mermaid-timeline.core.mjs",
+  "types": "dist/detector.d.ts",
   "type": "module",
   "exports": {
     ".": {
-      "require": "./dist/mermaid-timeline.min.js",
-      "import": "./dist/mermaid-timeline.core.mjs"
+      "import": "./dist/mermaid-timeline.core.mjs",
+      "types": "./dist/detector.d.ts"
     },
     "./*": "./*"
   },
@@ -19,24 +19,13 @@
     "mermaid"
   ],
   "scripts": {
-    "clean": "rimraf dist",
-    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
-    "build:watch": "yarn build:code --watch",
-    "build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"",
-    "build": "yarn clean; yarn build:esbuild",
-    "dev": "node .esbuild/serve.cjs",
-    "release": "yarn build",
-    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
-    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
-    "lint:jison": "ts-node-esm src/jison/lint.mts",
-    "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
-    "todo-pre-commit": "lint-staged"
+    "prepublishOnly": "pnpm -w run build"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/mermaid-js/mermaid"
   },
-  "author": "Knut Sveidqvist",
+  "author": "Ashish Jain",
   "license": "MIT",
   "standard": {
     "ignore": [

From 3cd15cdcf2a2d6e81a296831323c57981fececfc Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 19 Jan 2023 20:50:36 +0100
Subject: [PATCH 09/26] #4012 Handling rows with only spaces in them

---
 packages/mermaid-mindmap/src/mindmap.spec.js      | 12 ++++++++++++
 packages/mermaid-mindmap/src/parser/mindmap.jison |  5 ++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid-mindmap/src/mindmap.spec.js b/packages/mermaid-mindmap/src/mindmap.spec.js
index e3f018350..2a2dd13bb 100644
--- a/packages/mermaid-mindmap/src/mindmap.spec.js
+++ b/packages/mermaid-mindmap/src/mindmap.spec.js
@@ -347,4 +347,16 @@ root
     expect(child.children.length).toEqual(2);
     expect(child.children[1].nodeId).toEqual('b');
   });
+  it('MMP-23 Rows with only spaces should not interfere', function () {
+    let str = 'mindmap\nroot\n A\n \n\n B';
+    mindmap.parse(str);
+    const mm = mindmap.yy.getMindmap();
+    expect(mm.nodeId).toEqual('root');
+    expect(mm.children.length).toEqual(2);
+
+    const child = mm.children[0];
+    expect(child.nodeId).toEqual('A');
+    const child2 = mm.children[1];
+    expect(child2.nodeId).toEqual('B');
+  });
 });
diff --git a/packages/mermaid-mindmap/src/parser/mindmap.jison b/packages/mermaid-mindmap/src/parser/mindmap.jison
index a96ee6261..651d9dc09 100644
--- a/packages/mermaid-mindmap/src/parser/mindmap.jison
+++ b/packages/mermaid-mindmap/src/parser/mindmap.jison
@@ -25,6 +25,7 @@
 \n				   { this.popState();}
 // [\s]*"::icon("   { this.begin('ICON'); }
 "::icon("   { yy.getLogger().trace('Begin icon');this.begin('ICON'); }
+[\s]+[\n]     {yy.getLogger().trace('SPACELINE');return 'SPACELINE'                 /* skip all whitespace */    ;}
 [\n]+               return 'NL';
 [^\)]+			 { return 'ICON'; }
 \)				   {yy.getLogger().trace('end icon');this.popState();}
@@ -72,6 +73,7 @@ start
 stop
   : NL {yy.getLogger().trace('Stop NL ');}
   | EOF {yy.getLogger().trace('Stop EOF ');}
+  | SPACELINE
   | stop NL {yy.getLogger().trace('Stop NL2 ');}
   | stop EOF {yy.getLogger().trace('Stop EOF2 ');}
   ;
@@ -81,9 +83,10 @@ document
 	;
 
 statement
-	: SPACELIST node       { yy.getLogger().trace('Node: ',$2.id);yy.addNode($1.length, $2.id, $2.descr, $2.type);  }
+	: SPACELIST node       { yy.getLogger().info('Node: ',$2.id);yy.addNode($1.length, $2.id, $2.descr, $2.type);  }
 	| SPACELIST ICON       { yy.getLogger().trace('Icon: ',$2);yy.decorateNode({icon: $2}); }
 	| SPACELIST CLASS      { yy.decorateNode({class: $2}); }
+  | SPACELINE { yy.getLogger().trace('SPACELIST');}
 	| node					       { yy.getLogger().trace('Node: ',$1.id);yy.addNode(0, $1.id, $1.descr, $1.type);  }
 	| ICON                 { yy.decorateNode({icon: $1}); }
 	| CLASS                { yy.decorateNode({class: $1}); }

From 7ef71cc04db5f855fe5d3a99f04727a3381febe3 Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Thu, 19 Jan 2023 21:05:38 +0100
Subject: [PATCH 10/26] Remove old test cases

---
 .../src/parser/timeline.spec.js               | 150 ------------------
 .../mermaid-timeline/src/timelineDb.spec.js   |  91 -----------
 2 files changed, 241 deletions(-)
 delete mode 100644 packages/mermaid-timeline/src/parser/timeline.spec.js
 delete mode 100644 packages/mermaid-timeline/src/timelineDb.spec.js

diff --git a/packages/mermaid-timeline/src/parser/timeline.spec.js b/packages/mermaid-timeline/src/parser/timeline.spec.js
deleted file mode 100644
index cc54d9f78..000000000
--- a/packages/mermaid-timeline/src/parser/timeline.spec.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import { parser } from './journey';
-import journeyDb from '../journeyDb';
-
-const parserFnConstructor = (str) => {
-  return () => {
-    parser.parse(str);
-  };
-};
-
-describe('when parsing a journey diagram it', function () {
-  beforeEach(function () {
-    parser.yy = journeyDb;
-    parser.yy.clear();
-  });
-
-  it('should handle a title definition', function () {
-    const str = 'journey\ntitle Adding journey diagram functionality to mermaid';
-
-    expect(parserFnConstructor(str)).not.toThrow();
-  });
-
-  it('should handle an accessibility description (accDescr)', function () {
-    const str =
-      'journey\n' +
-      'accDescr: A user journey for family shopping\n' +
-      'title Adding journey diagram functionality to mermaid\n' +
-      'section Order from website';
-
-    expect(parserFnConstructor(str)).not.toThrow();
-  });
-  it('should handle an accessibility multiline description (accDescr)', function () {
-    const str =
-      'journey\n' +
-      `accDescr {
-        A user journey for
-        family shopping
-      }` +
-      'title Adding journey diagram functionality to mermaid\n' +
-      'accTitle: Adding acc journey diagram functionality to mermaid\n' +
-      'section Order from website';
-
-    expect(parserFnConstructor(str)).not.toThrow();
-    expect(journeyDb.getAccDescription()).toBe('A user journey for\nfamily shopping');
-    expect(journeyDb.getDiagramTitle()).toBe('Adding journey diagram functionality to mermaid');
-    expect(journeyDb.getAccTitle()).toBe('Adding acc journey diagram functionality to mermaid');
-  });
-  it('should handle an accessibility title (accDescr)', function () {
-    const str = `journey
-    accTitle: The title
-    section Order from website`;
-
-    expect(parserFnConstructor(str)).not.toThrow();
-    expect(journeyDb.getAccDescription()).toBe('');
-    expect(journeyDb.getAccTitle()).toBe('The title');
-  });
-
-  it('should handle a section definition', function () {
-    const str =
-      'journey\n' +
-      'title Adding journey diagram functionality to mermaid\n' +
-      'section Order from website';
-
-    expect(parserFnConstructor(str)).not.toThrow();
-  });
-  it('should handle multiline section titles with different line breaks', function () {
-    const str =
-      'journey\n' +
-      'title Adding gantt diagram functionality to mermaid\n' +
-      'section Line1
Line2
Line3
Line4Line5';
-
-    expect(parserFnConstructor(str)).not.toThrow();
-  });
-
-  it('should handle a task definition', function () {
-    const str =
-      'journey\n' +
-      'title Adding journey diagram functionality to mermaid\n' +
-      'section Documentation\n' +
-      'A task: 5: Alice, Bob, Charlie\n' +
-      'B task: 3:Bob, Charlie\n' +
-      'C task: 5\n' +
-      'D task: 5: Charlie, Alice\n' +
-      'E task: 5:\n' +
-      'section Another section\n' +
-      'P task: 5:\n' +
-      'Q task: 5:\n' +
-      'R task: 5:';
-    expect(parserFnConstructor(str)).not.toThrow();
-
-    const tasks = parser.yy.getTasks();
-    expect(tasks.length).toEqual(8);
-
-    expect(tasks[0]).toEqual({
-      score: 5,
-      people: ['Alice', 'Bob', 'Charlie'],
-      section: 'Documentation',
-      task: 'A task',
-      type: 'Documentation',
-    });
-    expect(tasks[1]).toEqual({
-      score: 3,
-      people: ['Bob', 'Charlie'],
-      section: 'Documentation',
-      type: 'Documentation',
-      task: 'B task',
-    });
-    expect(tasks[2]).toEqual({
-      score: 5,
-      people: [],
-      section: 'Documentation',
-      type: 'Documentation',
-      task: 'C task',
-    });
-    expect(tasks[3]).toEqual({
-      score: 5,
-      people: ['Charlie', 'Alice'],
-      section: 'Documentation',
-      task: 'D task',
-      type: 'Documentation',
-    });
-    expect(tasks[4]).toEqual({
-      score: 5,
-      people: [''],
-      section: 'Documentation',
-      type: 'Documentation',
-      task: 'E task',
-    });
-    expect(tasks[5]).toEqual({
-      score: 5,
-      people: [''],
-      section: 'Another section',
-      type: 'Another section',
-      task: 'P task',
-    });
-    expect(tasks[6]).toEqual({
-      score: 5,
-      people: [''],
-      section: 'Another section',
-      type: 'Another section',
-      task: 'Q task',
-    });
-    expect(tasks[7]).toEqual({
-      score: 5,
-      people: [''],
-      section: 'Another section',
-      type: 'Another section',
-      task: 'R task',
-    });
-  });
-});
diff --git a/packages/mermaid-timeline/src/timelineDb.spec.js b/packages/mermaid-timeline/src/timelineDb.spec.js
deleted file mode 100644
index 3a17ca202..000000000
--- a/packages/mermaid-timeline/src/timelineDb.spec.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import journeyDb from './journeyDb';
-
-describe('when using the journeyDb', function () {
-  beforeEach(function () {
-    journeyDb.clear();
-  });
-
-  describe('when calling the clear function', function () {
-    beforeEach(function () {
-      journeyDb.addSection('weekends skip test');
-      journeyDb.addTask('test1', '4: id1, id3');
-      journeyDb.addTask('test2', '2: id2');
-      journeyDb.clear();
-    });
-
-    it.each`
-      fn               | expected
-      ${'getTasks'}    | ${[]}
-      ${'getAccTitle'} | ${''}
-      ${'getSections'} | ${[]}
-      ${'getActors'}   | ${[]}
-    `('should clear $fn', ({ fn, expected }) => {
-      expect(journeyDb[fn]()).toEqual(expected);
-    });
-  });
-
-  describe('when calling the clear function', function () {
-    beforeEach(function () {
-      journeyDb.addSection('weekends skip test');
-      journeyDb.addTask('test1', '3: id1, id3');
-      journeyDb.addTask('test2', '1: id2');
-      journeyDb.clear();
-    });
-    it.each`
-      fn                     | expected
-      ${'getTasks'}          | ${[]}
-      ${'getAccTitle'}       | ${''}
-      ${'getAccDescription'} | ${''}
-      ${'getSections'}       | ${[]}
-    `('should clear $fn', ({ fn, expected }) => {
-      expect(journeyDb[fn]()).toEqual(expected);
-    });
-  });
-
-  describe('tasks and actors should be added', function () {
-    journeyDb.setAccTitle('Shopping');
-    journeyDb.setAccDescription('A user journey for family shopping');
-    journeyDb.addSection('Journey to the shops');
-    journeyDb.addTask('Get car keys', ':5:Dad');
-    journeyDb.addTask('Go to car', ':3:Dad, Mum, Child#1, Child#2');
-    journeyDb.addTask('Drive to supermarket', ':4:Dad');
-    journeyDb.addSection('Do shopping');
-    journeyDb.addTask('Go shopping', ':5:Mum');
-
-    expect(journeyDb.getAccTitle()).toEqual('Shopping');
-    expect(journeyDb.getAccDescription()).toEqual('A user journey for family shopping');
-    expect(journeyDb.getTasks()).toEqual([
-      {
-        score: 5,
-        people: ['Dad'],
-        section: 'Journey to the shops',
-        task: 'Get car keys',
-        type: 'Journey to the shops',
-      },
-      {
-        score: 3,
-        people: ['Dad', 'Mum', 'Child#1', 'Child#2'],
-        section: 'Journey to the shops',
-        task: 'Go to car',
-        type: 'Journey to the shops',
-      },
-      {
-        score: 4,
-        people: ['Dad'],
-        section: 'Journey to the shops',
-        task: 'Drive to supermarket',
-        type: 'Journey to the shops',
-      },
-      {
-        score: 5,
-        people: ['Mum'],
-        section: 'Do shopping',
-        task: 'Go shopping',
-        type: 'Do shopping',
-      },
-    ]);
-    expect(journeyDb.getActors()).toEqual(['Child#1', 'Child#2', 'Dad', 'Mum']);
-
-    expect(journeyDb.getSections()).toEqual(['Journey to the shops', 'Do shopping']);
-  });
-});

From 023f2354cdd659fc9827a567342ded4ed6df7579 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 20 Jan 2023 08:31:01 +0100
Subject: [PATCH 11/26]

---
 cypress/platform/knsv2.html             | 36 ++++++++++++++++---------
 packages/mermaid-mindmap/src/svgDraw.js |  6 ++---
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index afc12dbe9..e28184627 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -54,7 +54,7 @@
     
   
   
-    
+    
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 graph TB
       a --> b
@@ -62,14 +62,14 @@ graph TB
       b --> d
       c --> d
     

-    
+    
 flowchart-elk TB
       a --> b
       a --> c
       b --> d
       c --> d
     

-    
+    
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
@@ -125,7 +125,7 @@ flowchart TB
 

     

-    
+    
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
   subgraph ibm[IBM Espresso CPU]
@@ -227,14 +227,24 @@ sequenceDiagram
     Customer->>+Merchant: Receives goods or services
         

-    
-      gantt
-        title Style today marker (vertical line should be 5px wide and half-transparent blue)
-        dateFormat YYYY-MM-DD
-        axisFormat %d
-        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
-        section Section1
-        Today: 1, -1h
+    
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness
and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
     

 
     
@@ -252,7 +262,7 @@ sequenceDiagram
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        // theme: 'forest',
+        theme: 'dark',
         startOnLoad: true,
         logLevel: 0,
         flowchart: {
diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid-mindmap/src/svgDraw.js
index d4f57f1f1..e4a52ad98 100644
--- a/packages/mermaid-mindmap/src/svgDraw.js
+++ b/packages/mermaid-mindmap/src/svgDraw.js
@@ -203,14 +203,12 @@ const roundedRectBkg = function (elem, node) {
  * @returns {number} The height nodes dom element
  */
 export const drawNode = function (elem, node, fullSection, conf) {
-  const section = (fullSection % MAX_SECTIONS) - 1;
+  const section = fullSection % MAX_SECTIONS;
   const nodeElem = elem.append('g');
   node.section = section;
   nodeElem.attr(
     'class',
-    (node.class ? node.class + ' ' : '') +
-      'mindmap-node ' +
-      (section < 0 ? 'section-root' : 'section-' + section)
+    (node.class ? node.class + ' ' : '') + 'mindmap-node ' + ('section-' + section)
   );
   const bkgElem = nodeElem.append('g');
 

From 80903e427ce2031002e2ac15f28bdf8d34cdc381 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 20 Jan 2023 10:18:26 +0100
Subject: [PATCH 12/26] #4012 Allowing multiple lines before the mindmap
 statement

---
 packages/mermaid-mindmap/src/mindmap.spec.js      | 12 ++++++++++++
 packages/mermaid-mindmap/src/parser/mindmap.jison |  9 ++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid-mindmap/src/mindmap.spec.js b/packages/mermaid-mindmap/src/mindmap.spec.js
index 2a2dd13bb..292d7ebf8 100644
--- a/packages/mermaid-mindmap/src/mindmap.spec.js
+++ b/packages/mermaid-mindmap/src/mindmap.spec.js
@@ -354,6 +354,18 @@ root
     expect(mm.nodeId).toEqual('root');
     expect(mm.children.length).toEqual(2);
 
+    const child = mm.children[0];
+    expect(child.nodeId).toEqual('A');
+    const child2 = mm.children[1];
+    expect(child2.nodeId).toEqual('B');
+  });
+  it('MMP-24 Handle rows above the mindmap declarations', function () {
+    let str = '\n \nmindmap\nroot\n A\n \n\n B';
+    mindmap.parse(str);
+    const mm = mindmap.yy.getMindmap();
+    expect(mm.nodeId).toEqual('root');
+    expect(mm.children.length).toEqual(2);
+
     const child = mm.children[0];
     expect(child.nodeId).toEqual('A');
     const child2 = mm.children[1];
diff --git a/packages/mermaid-mindmap/src/parser/mindmap.jison b/packages/mermaid-mindmap/src/parser/mindmap.jison
index 651d9dc09..b604d3b1e 100644
--- a/packages/mermaid-mindmap/src/parser/mindmap.jison
+++ b/packages/mermaid-mindmap/src/parser/mindmap.jison
@@ -67,9 +67,16 @@ start
 // %{	: info document 'EOF' { return yy; } }
 	: MINDMAP document  { return yy; }
 	| MINDMAP NL document  { return yy; }
-  |	SPACELIST MINDMAP document  { return yy; }
+  |	spaceLines MINDMAP document  { return yy; }
+  |	spaceLines MINDMAP NL document  { return yy; }
 	;
 
+spaceLines
+  : SPACELINE
+  | spaceLines SPACELINE
+  | spaceLines NL
+  ;
+
 stop
   : NL {yy.getLogger().trace('Stop NL ');}
   | EOF {yy.getLogger().trace('Stop EOF ');}

From bc56a7d4f1a9a171d5b70e6f3cf8fccfbf70c9f4 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 20 Jan 2023 10:21:13 +0100
Subject: [PATCH 13/26] #4012 Neater grammar for the rows before mindmap

---
 packages/mermaid-mindmap/src/mindmap.spec.js      | 12 ++++++++++++
 packages/mermaid-mindmap/src/parser/mindmap.jison | 13 ++++++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid-mindmap/src/mindmap.spec.js b/packages/mermaid-mindmap/src/mindmap.spec.js
index 292d7ebf8..753804a5d 100644
--- a/packages/mermaid-mindmap/src/mindmap.spec.js
+++ b/packages/mermaid-mindmap/src/mindmap.spec.js
@@ -366,6 +366,18 @@ root
     expect(mm.nodeId).toEqual('root');
     expect(mm.children.length).toEqual(2);
 
+    const child = mm.children[0];
+    expect(child.nodeId).toEqual('A');
+    const child2 = mm.children[1];
+    expect(child2.nodeId).toEqual('B');
+  });
+  it('MMP-25 Handle rows above the mindmap declarations, no space', function () {
+    let str = '\n\n\nmindmap\nroot\n A\n \n\n B';
+    mindmap.parse(str);
+    const mm = mindmap.yy.getMindmap();
+    expect(mm.nodeId).toEqual('root');
+    expect(mm.children.length).toEqual(2);
+
     const child = mm.children[0];
     expect(child.nodeId).toEqual('A');
     const child2 = mm.children[1];
diff --git a/packages/mermaid-mindmap/src/parser/mindmap.jison b/packages/mermaid-mindmap/src/parser/mindmap.jison
index b604d3b1e..d2f6bbf1a 100644
--- a/packages/mermaid-mindmap/src/parser/mindmap.jison
+++ b/packages/mermaid-mindmap/src/parser/mindmap.jison
@@ -65,11 +65,9 @@
 
 start
 // %{	: info document 'EOF' { return yy; } }
-	: MINDMAP document  { return yy; }
-	| MINDMAP NL document  { return yy; }
-  |	spaceLines MINDMAP document  { return yy; }
-  |	spaceLines MINDMAP NL document  { return yy; }
-	;
+	: mindMap
+  |	spaceLines mindMap
+  ;
 
 spaceLines
   : SPACELINE
@@ -77,6 +75,11 @@ spaceLines
   | spaceLines NL
   ;
 
+mindMap
+  : MINDMAP document  { return yy; }
+  | MINDMAP NL document  { return yy; }
+  ;
+
 stop
   : NL {yy.getLogger().trace('Stop NL ');}
   | EOF {yy.getLogger().trace('Stop EOF ');}

From de8928b2d92e1684691682d339e2e17700939275 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 20 Jan 2023 12:48:06 +0100
Subject: [PATCH 14/26] #4016 Fix for max_sections in mindmap renderer

---
 packages/mermaid-mindmap/src/svgDraw.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid-mindmap/src/svgDraw.js
index e4a52ad98..79eab6e1d 100644
--- a/packages/mermaid-mindmap/src/svgDraw.js
+++ b/packages/mermaid-mindmap/src/svgDraw.js
@@ -203,7 +203,7 @@ const roundedRectBkg = function (elem, node) {
  * @returns {number} The height nodes dom element
  */
 export const drawNode = function (elem, node, fullSection, conf) {
-  const section = fullSection % MAX_SECTIONS;
+  const section = fullSection % (MAX_SECTIONS - 1);
   const nodeElem = elem.append('g');
   node.section = section;
   nodeElem.attr(
@@ -303,7 +303,7 @@ export const drawNode = function (elem, node, fullSection, conf) {
 };
 
 export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, fullSection) {
-  const section = (fullSection % MAX_SECTIONS) - 1;
+  const section = fullSection % (MAX_SECTIONS - 1);
   const sx = parent.x + parent.width / 2;
   const sy = parent.y + parent.height / 2;
   const ex = mindmap.x + mindmap.width / 2;

From 8af5c4c34127dc216a97546e1d0e17a75f030a66 Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Wed, 25 Jan 2023 17:44:34 +0100
Subject: [PATCH 15/26] Fix parser grammer conflicts

---
 packages/mermaid-timeline/src/parser/timeline.jison | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid-timeline/src/parser/timeline.jison b/packages/mermaid-timeline/src/parser/timeline.jison
index 4f8ac5cbc..db22a9bcf 100644
--- a/packages/mermaid-timeline/src/parser/timeline.jison
+++ b/packages/mermaid-timeline/src/parser/timeline.jison
@@ -81,11 +81,17 @@ statement
   | acc_descr acc_descr_value  { $$=$2.trim();yy.getCommonDb().setAccDescription($$); }
   | acc_descr_multiline_value { $$=$1.trim();yy.getCommonDb().setAccDescription($$); }
   | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
-  | period {yy.addTask($1,0,'');$$=$1;}
-  | period event {yy.addTask($1,0,$2.substr(2));$$=$1;}
-  | event {yy.addEvent($1.substr(2));$$=$1;}
+  | period_statement
+  | event_statement
   | directive
   ;
+period_statement
+  : period {yy.addTask($1,0,'');$$=$1;}
+;
+event_statement
+  : event {yy.addEvent($1.substr(2));$$=$1;}
+;
+
 
 openDirective
   : open_directive { yy.parseDirective('%%{', 'open_directive'); }

From 5c14df0aebe7b436341875f0a7dfad770540ccbd Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Wed, 25 Jan 2023 17:45:47 +0100
Subject: [PATCH 16/26] Added jest test cases

---
 .../mermaid-timeline/src/timeline.spec.js     | 122 ++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 packages/mermaid-timeline/src/timeline.spec.js

diff --git a/packages/mermaid-timeline/src/timeline.spec.js b/packages/mermaid-timeline/src/timeline.spec.js
new file mode 100644
index 000000000..5cff6ace0
--- /dev/null
+++ b/packages/mermaid-timeline/src/timeline.spec.js
@@ -0,0 +1,122 @@
+import { parser as timeline } from './parser/timeline';
+import * as timelineDB from './timelineDb';
+import { injectUtils } from './mermaidUtils';
+import * as _commonDb from '../../mermaid/src/commonDb';
+import { parseDirective as _parseDirective } from '../../mermaid/src/directiveUtils';
+
+import {
+  log,
+  setLogLevel,
+  getConfig,
+  sanitizeText,
+  setupGraphViewBox,
+} from '../../mermaid/src/diagram-api/diagramAPI';
+
+injectUtils(
+  log,
+  setLogLevel,
+  getConfig,
+  sanitizeText,
+  setupGraphViewBox,
+  _commonDb,
+  _parseDirective
+);
+
+describe('when parsing a timeline ', function () {
+  beforeEach(function () {
+    timeline.yy = timelineDB;
+    timelineDB.clear();
+    setLogLevel('trace');
+  });
+  describe('Timeline', function () {
+    it('TL-1 should handle a simple section definition abc-123', function () {
+      let str = `timeline
+    section abc-123`;
+
+      timeline.parse(str);
+      expect(timelineDB.getSections()).to.deep.equal(['abc-123']);
+    });
+
+    it('TL-2 should handle a simple section and only two tasks', function () {
+      let str = `timeline
+    section abc-123
+    task1
+    task2`;
+      timeline.parse(str);
+      timelineDB.getTasks().forEach((task) => {
+        expect(task.section).to.equal('abc-123');
+        expect(task.task).to.be.oneOf(['task1', 'task2']);
+      });
+    });
+
+    it('TL-3 should handle a two section and two coressponding tasks', function () {
+      let str = `timeline
+    section abc-123
+    task1
+    task2
+    section abc-456
+    task3
+    task4`;
+      timeline.parse(str);
+      expect(timelineDB.getSections()).to.deep.equal(['abc-123', 'abc-456']);
+      timelineDB.getTasks().forEach((task) => {
+        expect(task.section).to.be.oneOf(['abc-123', 'abc-456']);
+        expect(task.task).to.be.oneOf(['task1', 'task2', 'task3', 'task4']);
+        if (task.section === 'abc-123') {
+          expect(task.task).to.be.oneOf(['task1', 'task2']);
+        } else {
+          expect(task.task).to.be.oneOf(['task3', 'task4']);
+        }
+      });
+    });
+
+    it('TL-4 should handle a section, and task and its events', function () {
+      let str = `timeline
+    section abc-123
+      task1: event1
+      task2: event2: event3
+   `;
+      timeline.parse(str);
+      expect(timelineDB.getSections()[0]).to.deep.equal('abc-123');
+      timelineDB.getTasks().forEach((t) => {
+        switch (t.task.trim()) {
+          case 'task1':
+            expect(t.events).to.deep.equal(['event1']);
+            break;
+
+          case 'task2':
+            expect(t.events).to.deep.equal(['event2', 'event3']);
+            break;
+
+          default:
+            break;
+        }
+      });
+    });
+
+    it('TL-5 should handle a section, and task and its multi line events', function () {
+      let str = `timeline
+    section abc-123
+      task1: event1
+      task2: event2: event3
+           : event4: event5
+   `;
+      timeline.parse(str);
+      expect(timelineDB.getSections()[0]).to.deep.equal('abc-123');
+      timelineDB.getTasks().forEach((t) => {
+        switch (t.task.trim()) {
+          case 'task1':
+            expect(t.events).to.deep.equal(['event1']);
+            break;
+
+          case 'task2':
+            expect(t.events).to.deep.equal(['event2', 'event3', 'event4', 'event5']);
+            break;
+
+          default:
+            break;
+        }
+      });
+    });
+  });
+});

From df1e9c41178863528af4ac6d641280753a51be3d Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Wed, 25 Jan 2023 17:46:23 +0100
Subject: [PATCH 17/26] Added rendering test cases

---
 .../integration/rendering/timeline.spec.ts    | 164 ++++++++++++++++++
 1 file changed, 164 insertions(+)
 create mode 100644 cypress/integration/rendering/timeline.spec.ts

diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts
new file mode 100644
index 000000000..6fae82fb4
--- /dev/null
+++ b/cypress/integration/rendering/timeline.spec.ts
@@ -0,0 +1,164 @@
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Timeline diagram', () => {
+  it('1: should render a simple timeline with no specific sections', () => {
+    imgSnapshotTest(
+      `timeline
+    title History of Social Media Platform
+    2002 : LinkedIn
+    2004 : Facebook : Google
+    2005 : Youtube
+    2006 : Twitter
+      `,
+      {}
+    );
+  });
+  it('2: should render a timeline diagram with sections', () => {
+    imgSnapshotTest(
+      `timeline
+    title Timeline of Industrial Revolution
+    section 17th-20th century
+        Industry 1.0 : Machinery, Water power, Steam 
power
+        Industry 2.0 : Electricity, Internal combustion engine, Mass production
+        Industry 3.0 : Electronics, Computers, Automation
+    section 21st century
+        Industry 4.0 : Internet, Robotics, Internet of Things
+        Industry 5.0 : Artificial intelligence, Big data,3D printing
+      `,
+      {}
+    );
+  });
+  it('3: should render a complex timeline with sections, and long events text with 
', () => {
+    imgSnapshotTest(
+      `timeline
+        title England's History Timeline
+        section Stone Age
+          7600 BC : Britain's oldest known house was built in Orkney, Scotland
+          6000 BC : Sea levels rise and Britain becomes an island.
 The people who live here are hunter-gatherers.
+        section Broze Age
+          2300 BC : People arrive from Europe and settle in Britain. 
They bring farming and metalworking.
+                  : New styles of pottery and ways of burying the dead appear.
+          2200 BC : The last major building works are completed at Stonehenge.
 People now bury their dead in stone circles.
+                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
+      `,
+      {}
+    );
+  });
+  it('4: should render a simple timeline with directives and disableMultiColor:true ', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+      `,
+      {}
+    );
+  });
+  it('5: should render a simple timeline with directive overriden colors', () => {
+    imgSnapshotTest(
+      ` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'cScale0': '#ff0000',
+              'cScale1': '#00ff00',
+              'cScale2': '#0000ff'
+       } } }%%
+       timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+  it('6: should render a simple timeline in base theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('7: should render a simple timeline in default theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('8: should render a simple timeline in dark theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('9: should render a simple timeline in neutral theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('10: should render a simple timeline in forest theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+});

From 49ce5222c96882888abd146f1cb3b342c93c3294 Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Wed, 25 Jan 2023 17:49:35 +0100
Subject: [PATCH 18/26] Lint Fixes

---
 .vite/build.ts                                |   4 +-
 cypress/platform/ashish2.html                 |  28 ++-
 .../src/mermaidUtils.ts                       |   3 +-
 packages/mermaid-mindmap/src/mermaidUtils.ts  |   2 +-
 .../mermaid-mindmap/src/mindmapRenderer.js    |   6 +-
 packages/mermaid-timeline/package.json        |   2 +-
 packages/mermaid-timeline/src/mermaidUtils.ts |   5 +-
 packages/mermaid-timeline/src/svgDraw.js      |  28 ++-
 packages/mermaid-timeline/src/timelineDb.js   |  19 +-
 .../mermaid-timeline/src/timelineRenderer.ts  | 175 ++++++++++--------
 packages/mermaid/src/defaultConfig.ts         |   2 -
 .../mermaid/src/diagram-api/diagramAPI.ts     |  22 ++-
 packages/mermaid/src/diagram-api/types.ts     |   2 +-
 packages/mermaid/src/directiveUtils.ts        |   9 +-
 .../src/docs/.vitepress/theme/mermaid.ts      |   2 +-
 packages/mermaid/src/docs/syntax/timeline.md  |  20 +-
 packages/mermaid/src/mermaidAPI.ts            |   1 -
 packages/mermaid/src/themes/theme-default.js  |   2 +-
 18 files changed, 188 insertions(+), 144 deletions(-)

diff --git a/.vite/build.ts b/.vite/build.ts
index 549ac3b0b..91050895b 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -166,8 +166,8 @@ if (watch) {
   if (!mermaidOnly) {
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
     // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
-  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline' }));
-  //build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline-detector' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline' }));
+    //build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline-detector' }));
   }
 } else if (visualize) {
   await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html
index c6dfdc6b0..f6df46fbc 100644
--- a/cypress/platform/ashish2.html
+++ b/cypress/platform/ashish2.html
@@ -71,7 +71,21 @@
           I am a big big big tasks
           I am not so big tasks
     

-     
+    
+ timeline
+        title MermaidChart 2023 Timeline
+        section 2023 Q1 <br> Release Personal Tier
+          Buttet 1 : sub-point 1a : sub-point 1b
+               : sub-point 1c
+          Bullet 2 : sub-point 2a : sub-point 2b
+        section 2023 Q2 
 Release XYZ Tier
+          Buttet 3 : sub-point 
 3a : sub-point 3b
+               : sub-point 3c
+          Bullet 4 : sub-point 4a : sub-point 4b
+
+    

+
+    
  timeline
         title England's History Timeline
         section Stone Age
@@ -96,7 +110,7 @@
           2008s : Instagram
           2010 : Pinterest
     

-    
+    
       %%{init: { 'logLevel': 'debug', 'theme': 'base', 'themeVariables': {
               'cScale0': '#ff0000',
               'cScale1': '#00ff00',
@@ -113,7 +127,7 @@
           2010 : Pinterest
     

 
-    
+    
           %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
               'cScale0': '#ff0000',
               'cScale1': '#00ff00',
@@ -173,11 +187,11 @@ mindmap
     
     
     
 ```

From 003997372eea347283a1f9481591d1c8f158a762 Mon Sep 17 00:00:00 2001
From: ashishjain0512 
Date: Thu, 26 Jan 2023 11:48:25 +0000
Subject: [PATCH 21/26] Update docs

---
 docs/syntax/timeline.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md
index 882efd499..4e917bc10 100644
--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -16,7 +16,8 @@
 timeline
     title History of Social Media Platform
     2002 : LinkedIn
-    2004 : Facebook : Google
+    2004 : Facebook
+         : Google
     2005 : Youtube
     2006 : Twitter
 ```
@@ -25,7 +26,8 @@ timeline
 timeline
     title History of Social Media Platform
     2002 : LinkedIn
-    2004 : Facebook : Google
+    2004 : Facebook
+         : Google
     2005 : Youtube
     2006 : Twitter
 ```

From 6a045db83cea7b98acca475fc984141e893dae10 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 8 Feb 2023 11:24:09 +0100
Subject: [PATCH 22/26] Fix for e2e issue with mindmap tests, not related to
 timeline

---
 packages/mermaid-mindmap/src/svgDraw.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid-mindmap/src/svgDraw.js
index 79eab6e1d..2b1aa021e 100644
--- a/packages/mermaid-mindmap/src/svgDraw.js
+++ b/packages/mermaid-mindmap/src/svgDraw.js
@@ -206,10 +206,11 @@ export const drawNode = function (elem, node, fullSection, conf) {
   const section = fullSection % (MAX_SECTIONS - 1);
   const nodeElem = elem.append('g');
   node.section = section;
-  nodeElem.attr(
-    'class',
-    (node.class ? node.class + ' ' : '') + 'mindmap-node ' + ('section-' + section)
-  );
+  let sectionClass = 'section-' + section;
+  if (section < 0) {
+    sectionClass += ' section-root';
+  }
+  nodeElem.attr('class', (node.class ? node.class + ' ' : '') + 'mindmap-node ' + sectionClass);
   const bkgElem = nodeElem.append('g');
 
   // Create the wrapped text element

From 7f254e37e96f13d246ed84832f881fedf2996c65 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Wed, 8 Feb 2023 16:01:29 +0530
Subject: [PATCH 23/26] Cleanup

---
 .vite/build.ts                                |   30 +-
 .vite/server.ts                               |    5 +-
 Setup.md                                      | 1755 -----------------
 .../diagrams/timeline/diagram-definition.ts   |    2 -
 .../src/diagrams/timeline/mermaidUtils.ts     |   72 -
 .../diagrams/timeline/parser/timeline.jison   |    2 +-
 6 files changed, 3 insertions(+), 1863 deletions(-)
 delete mode 100644 Setup.md
 delete mode 100644 packages/mermaid/src/diagrams/timeline/mermaidUtils.ts

diff --git a/.vite/build.ts b/.vite/build.ts
index 16f8a8c88..019461c49 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -41,26 +41,6 @@ const packageOptions = {
     packageName: 'mermaid-mindmap',
     file: 'detector.ts',
   },
-  // 'mermaid-timeline': {
-  //   name: 'mermaid-timeline',
-  //   packageName: 'mermaid-timeline',
-  //   file: 'detector.ts',
-  // },
-  // 'mermaid-timeline-detector': {
-  //   name: 'mermaid-timeline-detector',
-  //   packageName: 'mermaid-timeline',
-  //   file: 'detector.ts',
-  // },
-  // 'mermaid-example-diagram': {
-  //   name: 'mermaid-example-diagram',
-  //   packageName: 'mermaid-example-diagram',
-  //   file: 'diagram-definition.ts',
-  // },
-  // 'mermaid-example-diagram-detector': {
-  //   name: 'mermaid-example-diagram-detector',
-  //   packageName: 'mermaid-example-diagram',
-  //   file: 'detector.ts',
-  // },
 };
 
 interface BuildOptions {
@@ -134,12 +114,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
 
   if (watch && config.build) {
     config.build.watch = {
-      include: [
-        'packages/mermaid-mindmap/src/**',
-        'packages/mermaid/src/**',
-        // 'packages/mermaid-example-diagram/src/**',
-        // 'packages/mermaid-timeline/src/**',
-      ],
+      include: ['packages/mermaid-mindmap/src/**', 'packages/mermaid/src/**'],
     };
   }
 
@@ -165,9 +140,6 @@ if (watch) {
   build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
-    // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
-    //build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline' }));
-    //build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline-detector' }));
   }
 } else if (visualize) {
   await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
diff --git a/.vite/server.ts b/.vite/server.ts
index a0baade33..aced396ec 100644
--- a/.vite/server.ts
+++ b/.vite/server.ts
@@ -1,6 +1,5 @@
 import express, { NextFunction, Request, Response } from 'express';
 import { createServer as createViteServer } from 'vite';
-// import { getBuildConfig } from './build';
 
 const cors = (req: Request, res: Response, next: NextFunction) => {
   res.header('Access-Control-Allow-Origin', '*');
@@ -22,9 +21,8 @@ async function createServer() {
 
   app.use(cors);
   app.use(express.static('./packages/mermaid/dist'));
-  app.use(express.static('./packages/mermaid-example-diagram/dist'));
+  // app.use(express.static('./packages/mermaid-example-diagram/dist'));
   app.use(express.static('./packages/mermaid-mindmap/dist'));
-  //app.use(express.static('./packages/mermaid-timeline/dist'));
   app.use(vite.middlewares);
   app.use(express.static('demos'));
   app.use(express.static('cypress/platform'));
@@ -34,5 +32,4 @@ async function createServer() {
   });
 }
 
-// build(getBuildConfig({ minify: false, watch: true }));
 createServer();
diff --git a/Setup.md b/Setup.md
deleted file mode 100644
index 4d09fcfca..000000000
--- a/Setup.md
+++ /dev/null
@@ -1,1755 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
-
-
-
-## mermaidAPI
-
-This is the API to be used when optionally handling the integration with the web page, instead of
-using the default integration provided by mermaid.js.
-
-The core of this api is the [**render**][1] function which, given a graph
-definition as text, renders the graph/diagram and returns an svg element for the graph.
-
-It is then up to the user of the API to make use of the svg, either insert it somewhere in the
-page or do something completely different.
-
-In addition to the render function, a number of behavioral configuration options are available.
-
-## Configuration
-
-**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click
-here][2]].**
-
-## **What follows are config instructions for older versions**
-
-These are the default options which can be overridden with the initialization call like so:
-
-**Example 1:**
 mermaid.initialize({ flowchart:{ htmlLabels: false } }); 

-
-**Example 2:**
  

-
-A summary of all options and their defaults is found [here][3].
-A description of each option follows below.
-
-## theme
-
-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".
 "theme": "forest",
-"themeCSS": ".node rect { fill: red; }" 

-
-## fontFamily
-
-| 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;'.
-
-## logLevel
-
-| 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)
-
-## securityLevel
-
-| 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.
-
-## startOnLoad
-
-| Parameter   | Description                                  | Type    | Required | Values      |
-| ----------- | -------------------------------------------- | ------- | -------- | ----------- |
-| startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |
-
-**Notes:** Default value: true
-
-## arrowMarkerAbsolute
-
-| 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
-
-## secure
-
-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']
-
-## deterministicIds
-
-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 behaviour.
-
-**Notes**:
-
-This matters if your files are checked into sourcecontrol e.g. git and should not change unless
-content is changed.
-
-Default value: false
-
-## deterministicIDSeed
-
-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.
-
-## flowchart
-
-The object containing configurations specific for flowcharts
-
-### diagramPadding
-
-| 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
-
-### htmlLabels
-
-| 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.
-
-### nodeSpacing
-
-| 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
-
-### rankSpacing
-
-| 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
-
-### curve
-
-| Parameter | Description                                        | Type   | Required | Values                        |
-| --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- |
-| curve     | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' |
-
-**Notes:**
-
-Default Value: 'basis'
-
-### useMaxWidth
-
-| 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
-
-### defaultRenderer
-
-| 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-wrapper'
-
-## sequence
-
-The object containing configurations specific for sequence diagrams
-
-### activationWidth
-
-| Parameter       | Description                  | Type    | Required | Values             |
-| --------------- | ---------------------------- | ------- | -------- | ------------------ |
-| activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |
-
-**Notes:** Default value :10
-
-### diagramMarginX
-
-| 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
-
-### diagramMarginY
-
-| Parameter      | Description                                       | Type    | Required | Values             |
-| -------------- | ------------------------------------------------- | ------- | -------- | ------------------ |
-| diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### actorMargin
-
-| Parameter   | Description           | Type    | Required | Values             |
-| ----------- | --------------------- | ------- | -------- | ------------------ |
-| actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 50
-
-### width
-
-| Parameter | Description          | Type    | Required | Values             |
-| --------- | -------------------- | ------- | -------- | ------------------ |
-| width     | Width of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 150
-
-### height
-
-| Parameter | Description           | Type    | Required | Values             |
-| --------- | --------------------- | ------- | -------- | ------------------ |
-| height    | Height of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 65
-
-### boxMargin
-
-| Parameter | Description              | Type    | Required | Values             |
-| --------- | ------------------------ | ------- | -------- | ------------------ |
-| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### boxTextMargin
-
-| Parameter     | Description                                  | Type    | Required | Values             |
-| ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 5
-
-### noteMargin
-
-| Parameter  | Description         | Type    | Required | Values             |
-| ---------- | ------------------- | ------- | -------- | ------------------ |
-| noteMargin | margin around notes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### messageMargin
-
-| Parameter     | Description            | Type    | Required | Values             |
-| ------------- | ---------------------- | ------- | -------- | ------------------ |
-| messageMargin | Space between messages | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 35
-
-### messageAlign
-
-| Parameter    | Description                 | Type   | Required | Values                    |
-| ------------ | --------------------------- | ------ | -------- | ------------------------- |
-| messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' |
-
-**Notes:** Default value: 'center'
-
-### mirrorActors
-
-| Parameter    | Description                 | Type    | Required | Values      |
-| ------------ | --------------------------- | ------- | -------- | ----------- |
-| mirrorActors | Mirror actors under diagram | boolean | Required | true, false |
-
-**Notes:** Default value: true
-
-### forceMenus
-
-| 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.
-
-### bottomMarginAdj
-
-| 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
-
-### useMaxWidth
-
-| 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
-
-### rightAngles
-
-| 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
-
-### showSequenceNumbers
-
-| Parameter           | Description                     | Type    | Required | Values      |
-| ------------------- | ------------------------------- | ------- | -------- | ----------- |
-| showSequenceNumbers | This will show the node numbers | boolean | Required | true, false |
-
-**Notes:** Default value: false
-
-### actorFontSize
-
-| 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**..
-
-### actorFontFamily
-
-| 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'
-
-### actorFontWeight
-
-This sets the font weight of the actor's description
-
-**Notes:** Default value: 400.
-
-### noteFontSize
-
-| Parameter    | Description                                     | Type    | Required | Values             |
-| ------------ | ----------------------------------------------- | ------- | -------- | ------------------ |
-| noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 14
-
-### noteFontFamily
-
-| 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'
-
-### noteFontWeight
-
-This sets the font weight of the note's description
-
-**Notes:** Default value: 400
-
-### noteAlign
-
-| Parameter | Description                                          | Type   | Required | Values                    |
-| --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- |
-| noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' |
-
-**Notes:** Default value: 'center'
-
-### messageFontSize
-
-| Parameter       | Description                               | Type    | Required | Values              |
-| --------------- | ----------------------------------------- | ------- | -------- | ------------------- |
-| messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number |
-
-**Notes:** Default value: 16
-
-### messageFontFamily
-
-| 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'
-
-### messageFontWeight
-
-This sets the font weight of the message's description
-
-**Notes:** Default value: 400.
-
-### wrap
-
-This sets the auto-wrap state for the diagram
-
-**Notes:** Default value: false.
-
-### wrapPadding
-
-This sets the auto-wrap padding for the diagram (sides only)
-
-**Notes:** Default value: 0.
-
-### labelBoxWidth
-
-This sets the width of the loop-box (loop, alt, opt, par)
-
-**Notes:** Default value: 50.
-
-### labelBoxHeight
-
-This sets the height of the loop-box (loop, alt, opt, par)
-
-**Notes:** Default value: 20.
-
-## gantt
-
-The object containing configurations specific for gantt diagrams
-
-### titleTopMargin
-
-### 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
-
-### barHeight
-
-| Parameter | Description                         | Type    | Required | Values             |
-| --------- | ----------------------------------- | ------- | -------- | ------------------ |
-| barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 20
-
-### barGap
-
-| 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
-
-### topPadding
-
-| 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
-
-### rightPadding
-
-| 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
-
-### leftPadding
-
-| 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
-
-### gridLineStartPadding
-
-| Parameter            | Description                                  | Type    | Required | Values             |
-| -------------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-| gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 35
-
-### fontSize
-
-| Parameter | Description | Type    | Required | Values             |
-| --------- | ----------- | ------- | -------- | ------------------ |
-| fontSize  | Font size   | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 11
-
-### sectionFontSize
-
-| Parameter       | Description            | Type    | Required | Values             |
-| --------------- | ---------------------- | ------- | -------- | ------------------ |
-| sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 11
-
-### numberSectionStyles
-
-| Parameter           | Description                              | Type    | Required | Values             |
-| ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |
-| numberSectionStyles | The number of alternating section styles | Integer | 4        | Any Positive Value |
-
-**Notes:** Default value: 4
-
-### axisFormat
-
-| Parameter  | Description                 | Type | Required | Values           |
-| ---------- | --------------------------- | ---- | -------- | ---------------- |
-| axisFormat | Datetime 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'.
-
-### useMaxWidth
-
-| 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
-
-### topAxis
-
-| 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**.
-
-## journey
-
-The object containing configurations specific for journey diagrams
-
-### diagramMarginX
-
-| 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
-
-### diagramMarginY
-
-| Parameter      | Description                                        | Type    | Required | Values             |
-| -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-| diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### leftMargin
-
-| Parameter   | Description           | Type    | Required | Values             |
-| ----------- | --------------------- | ------- | -------- | ------------------ |
-| actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 50
-
-### width
-
-| Parameter | Description          | Type    | Required | Values             |
-| --------- | -------------------- | ------- | -------- | ------------------ |
-| width     | Width of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 150
-
-### height
-
-| Parameter | Description           | Type    | Required | Values             |
-| --------- | --------------------- | ------- | -------- | ------------------ |
-| height    | Height of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 65
-
-### boxMargin
-
-| Parameter | Description              | Type    | Required | Values             |
-| --------- | ------------------------ | ------- | -------- | ------------------ |
-| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### boxTextMargin
-
-| Parameter     | Description                                  | Type    | Required | Values             |
-| ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 5
-
-### noteMargin
-
-| Parameter  | Description         | Type    | Required | Values             |
-| ---------- | ------------------- | ------- | -------- | ------------------ |
-| noteMargin | Margin around notes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### messageMargin
-
-| Parameter     | Description             | Type    | Required | Values             |
-| ------------- | ----------------------- | ------- | -------- | ------------------ |
-| messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-
-**Notes:**
-
-Space between messages.
-
-Default value: 35
-
-### messageAlign
-
-| Parameter    | Description                 | Type | Required | Values                    |
-| ------------ | --------------------------- | ---- | -------- | ------------------------- |
-| messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
-
-**Notes:** Default value: 'center'
-
-### bottomMarginAdj
-
-| 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
-
-### useMaxWidth
-
-| 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
-
-### rightAngles
-
-| 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
-
-## timeline
-
-The object containing configurations specific for timeline diagrams
-
-### diagramMarginX
-
-| 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
-
-### diagramMarginY
-
-| Parameter      | Description                                        | Type    | Required | Values             |
-| -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-| diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### leftMargin
-
-| Parameter   | Description           | Type    | Required | Values             |
-| ----------- | --------------------- | ------- | -------- | ------------------ |
-| actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 50
-
-### width
-
-| Parameter | Description          | Type    | Required | Values             |
-| --------- | -------------------- | ------- | -------- | ------------------ |
-| width     | Width of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 150
-
-### height
-
-| Parameter | Description           | Type    | Required | Values             |
-| --------- | --------------------- | ------- | -------- | ------------------ |
-| height    | Height of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 65
-
-### boxMargin
-
-| Parameter | Description              | Type    | Required | Values             |
-| --------- | ------------------------ | ------- | -------- | ------------------ |
-| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### boxTextMargin
-
-| Parameter     | Description                                  | Type    | Required | Values             |
-| ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 5
-
-### noteMargin
-
-| Parameter  | Description         | Type    | Required | Values             |
-| ---------- | ------------------- | ------- | -------- | ------------------ |
-| noteMargin | Margin around notes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### messageMargin
-
-| Parameter     | Description             | Type    | Required | Values             |
-| ------------- | ----------------------- | ------- | -------- | ------------------ |
-| messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-
-**Notes:**
-
-Space between messages.
-
-Default value: 35
-
-### messageAlign
-
-| Parameter    | Description                 | Type | Required | Values                    |
-| ------------ | --------------------------- | ---- | -------- | ------------------------- |
-| messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
-
-**Notes:** Default value: 'center'
-
-### bottomMarginAdj
-
-| 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
-
-### useMaxWidth
-
-| 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
-
-### rightAngles
-
-| 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
-
-## useMaxWidth
-
-| 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
-
-## defaultRenderer
-
-| 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'
-
-## useMaxWidth
-
-| 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
-
-## defaultRenderer
-
-| 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'
-
-## er
-
-The object containing configurations specific for entity relationship diagrams
-
-### diagramPadding
-
-| 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
-
-### layoutDirection
-
-| 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'
-
-### minEntityWidth
-
-| 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
-
-### minEntityHeight
-
-| 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
-
-### entityPadding
-
-| 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
-
-### stroke
-
-| Parameter | Description                         | Type   | Required | Values               |
-| --------- | ----------------------------------- | ------ | -------- | -------------------- |
-| stroke    | Stroke color of box edges and lines | string | 4        | Any recognized color |
-
-**Notes:** Default value: 'gray'
-
-### fill
-
-| Parameter | Description                | Type   | Required | Values               |
-| --------- | -------------------------- | ------ | -------- | -------------------- |
-| fill      | Fill color of entity boxes | string | 4        | Any recognized color |
-
-**Notes:** Default value: 'honeydew'
-
-### fontSize
-
-| 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
-
-### useMaxWidth
-
-| 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
-
-## pie
-
-The object containing configurations specific for pie diagrams
-
-### useMaxWidth
-
-| 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
-
-## requirement
-
-The object containing configurations specific for req diagrams
-
-### useMaxWidth
-
-| 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
-
-## c4
-
-The object containing configurations specific for c4 diagrams
-
-### diagramMarginX
-
-| 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
-
-### diagramMarginY
-
-| Parameter      | Description                                 | Type    | Required | Values             |
-| -------------- | ------------------------------------------- | ------- | -------- | ------------------ |
-| diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### c4ShapeMargin
-
-| Parameter     | Description           | Type    | Required | Values             |
-| ------------- | --------------------- | ------- | -------- | ------------------ |
-| c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 50
-
-### c4ShapePadding
-
-| Parameter      | Description            | Type    | Required | Values             |
-| -------------- | ---------------------- | ------- | -------- | ------------------ |
-| c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 20
-
-### width
-
-| Parameter | Description           | Type    | Required | Values             |
-| --------- | --------------------- | ------- | -------- | ------------------ |
-| width     | Width of person boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 216
-
-### height
-
-| Parameter | Description            | Type    | Required | Values             |
-| --------- | ---------------------- | ------- | -------- | ------------------ |
-| height    | Height of person boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 60
-
-### boxMargin
-
-| Parameter | Description         | Type    | Required | Values             |
-| --------- | ------------------- | ------- | -------- | ------------------ |
-| boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### useMaxWidth
-
-| 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
-
-### c4ShapeInRow
-
-| 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
-
-### c4BoundaryInRow
-
-| Parameter       | Description | Type    | Required | Values             |
-| --------------- | ----------- | ------- | -------- | ------------------ |
-| c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
-
-**Notes:** How many boundarys to place in each row.
-
-Default value: 2
-
-### personFontSize
-
-This sets the font size of Person shape for the diagram
-
-**Notes:** Default value: 14.
-
-### personFontFamily
-
-This sets the font family of Person shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### personFontWeight
-
-This sets the font weight of Person shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_personFontSize
-
-This sets the font size of External Person shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_personFontFamily
-
-This sets the font family of External Person shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_personFontWeight
-
-This sets the font weight of External Person shape for the diagram
-
-**Notes:** Default value: normal.
-
-### systemFontSize
-
-This sets the font size of System shape for the diagram
-
-**Notes:** Default value: 14.
-
-### systemFontFamily
-
-This sets the font family of System shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### systemFontWeight
-
-This sets the font weight of System shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_systemFontSize
-
-This sets the font size of External System shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_systemFontFamily
-
-This sets the font family of External System shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_systemFontWeight
-
-This sets the font weight of External System shape for the diagram
-
-**Notes:** Default value: normal.
-
-### system_dbFontSize
-
-This sets the font size of System DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### system_dbFontFamily
-
-This sets the font family of System DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### system_dbFontWeight
-
-This sets the font weight of System DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_system_dbFontSize
-
-This sets the font size of External System DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_system_dbFontFamily
-
-This sets the font family of External System DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_system_dbFontWeight
-
-This sets the font weight of External System DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### system_queueFontSize
-
-This sets the font size of System Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### system_queueFontFamily
-
-This sets the font family of System Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### system_queueFontWeight
-
-This sets the font weight of System Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_system_queueFontSize
-
-This sets the font size of External System Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_system_queueFontFamily
-
-This sets the font family of External System Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_system_queueFontWeight
-
-This sets the font weight of External System Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### boundaryFontSize
-
-This sets the font size of Boundary shape for the diagram
-
-**Notes:** Default value: 14.
-
-### boundaryFontFamily
-
-This sets the font family of Boundary shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### boundaryFontWeight
-
-This sets the font weight of Boundary shape for the diagram
-
-**Notes:** Default value: normal.
-
-### messageFontSize
-
-This sets the font size of Message shape for the diagram
-
-**Notes:** Default value: 12.
-
-### messageFontFamily
-
-This sets the font family of Message shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### messageFontWeight
-
-This sets the font weight of Message shape for the diagram
-
-**Notes:** Default value: normal.
-
-### containerFontSize
-
-This sets the font size of Container shape for the diagram
-
-**Notes:** Default value: 14.
-
-### containerFontFamily
-
-This sets the font family of Container shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### containerFontWeight
-
-This sets the font weight of Container shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_containerFontSize
-
-This sets the font size of External Container shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_containerFontFamily
-
-This sets the font family of External Container shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_containerFontWeight
-
-This sets the font weight of External Container shape for the diagram
-
-**Notes:** Default value: normal.
-
-### container_dbFontSize
-
-This sets the font size of Container DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### container_dbFontFamily
-
-This sets the font family of Container DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### container_dbFontWeight
-
-This sets the font weight of Container DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_container_dbFontSize
-
-This sets the font size of External Container DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_container_dbFontFamily
-
-This sets the font family of External Container DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_container_dbFontWeight
-
-This sets the font weight of External Container DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### container_queueFontSize
-
-This sets the font size of Container Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### container_queueFontFamily
-
-This sets the font family of Container Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### container_queueFontWeight
-
-This sets the font weight of Container Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_container_queueFontSize
-
-This sets the font size of External Container Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_container_queueFontFamily
-
-This sets the font family of External Container Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_container_queueFontWeight
-
-This sets the font weight of External Container Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### componentFontSize
-
-This sets the font size of Component shape for the diagram
-
-**Notes:** Default value: 14.
-
-### componentFontFamily
-
-This sets the font family of Component shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### componentFontWeight
-
-This sets the font weight of Component shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_componentFontSize
-
-This sets the font size of External Component shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_componentFontFamily
-
-This sets the font family of External Component shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_componentFontWeight
-
-This sets the font weight of External Component shape for the diagram
-
-**Notes:** Default value: normal.
-
-### component_dbFontSize
-
-This sets the font size of Component DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### component_dbFontFamily
-
-This sets the font family of Component DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### component_dbFontWeight
-
-This sets the font weight of Component DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_component_dbFontSize
-
-This sets the font size of External Component DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_component_dbFontFamily
-
-This sets the font family of External Component DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_component_dbFontWeight
-
-This sets the font weight of External Component DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### component_queueFontSize
-
-This sets the font size of Component Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### component_queueFontFamily
-
-This sets the font family of Component Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### component_queueFontWeight
-
-This sets the font weight of Component Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_component_queueFontSize
-
-This sets the font size of External Component Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_component_queueFontFamily
-
-This sets the font family of External Component Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_component_queueFontWeight
-
-This sets the font weight of External Component Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### wrap
-
-This sets the auto-wrap state for the diagram
-
-**Notes:** Default value: true.
-
-### wrapPadding
-
-This sets the auto-wrap padding for the diagram (sides only)
-
-**Notes:** Default value: 0.
-
-## parse
-
-### Parameters
-
-- `text` **[string][4]**
-- `parseError` **[Function][5]?**
-
-Returns **[boolean][6]**
-
-## setSiteConfig
-
-## setSiteConfig
-
-| Function      | Description                           | Type        | Values                                  |
-| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
-| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
-
-**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls
-to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)
-will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
-function _Default value: At default, will mirror Global Config_
-
-### Parameters
-
-- `conf` **MermaidConfig** The base currentConfig to use as siteConfig
-
-Returns **[object][7]** The siteConfig
-
-## getSiteConfig
-
-## getSiteConfig
-
-| Function      | Description                                       | Type        | Values                           |
-| ------------- | ------------------------------------------------- | ----------- | -------------------------------- |
-| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
-
-**Notes**: Returns **any** values in siteConfig.
-
-Returns **[object][7]** The siteConfig
-
-## setConfig
-
-## setConfig
-
-| Function      | Description                           | Type        | Values                                  |
-| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
-| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
-
-**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
-keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
-corresponding siteConfig value.
-
-### Parameters
-
-- `conf` **any** The potential currentConfig
-
-Returns **any** The currentConfig merged with the sanitized conf
-
-## render
-
-Function that renders an svg with a graph from a chart definition. Usage example below.
-
-```javascript
-mermaidAPI.initialize({
-  startOnLoad: true,
-});
-$(function () {
-  const graphDefinition = 'graph TB\na-->b';
-  const cb = function (svgGraph) {
-    console.log(svgGraph);
-  };
-  mermaidAPI.render('id1', graphDefinition, cb);
-});
-```
-
-### Parameters
-
-- `id` **[string][4]** The id of the element to be rendered
-- `text` **[string][4]** The graph definition
-- `cb` **function (svgCode: [string][4], bindFunctions: function (element: [Element][8]): void): void**
-- `container` **[Element][8]** Selector to element in which a div with the graph temporarily will be
-  inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
-  element will be removed when rendering is completed.
-
-Returns **void**
-
-## getConfig
-
-## getConfig
-
-| Function  | Description               | Type        | Return Values                  |
-| --------- | ------------------------- | ----------- | ------------------------------ |
-| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
-
-**Notes**: Returns **any** the currentConfig
-
-Returns **any** The currentConfig
-
-## sanitize
-
-## sanitize
-
-| Function | Description                            | Type        | Values |
-| -------- | -------------------------------------- | ----------- | ------ |
-| sanitize | Sets the siteConfig to desired values. | Put Request | None   |
-
-Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
-options in-place
-
-### Parameters
-
-- `options` **any** The potential setConfig parameter
-
-## addDirective
-
-Pushes in a directive to the configuration
-
-### Parameters
-
-- `directive` **[object][7]** The directive to push in
-
-## reset
-
-## reset
-
-| Function | Description                  | Type        | Required | Values |
-| -------- | ---------------------------- | ----------- | -------- | ------ |
-| reset    | Resets currentConfig to conf | Put Request | Required | None   |
-
-## conf
-
-| Parameter | Description                                                    | Type       | Required | Values                                       |
-| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
-| conf      | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
-
-**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
-
-### Parameters
-
-- `config` (optional, default `siteConfig`)
-
-Returns **void**
-
-## initialize
-
-### Parameters
-
-- `options` **MermaidConfig**
-
-##
-
-## mermaidAPI configuration defaults
-
-```html
-
-```
-
-[1]: Setup.md?id=render
-[2]: 8.6.0_docs.md
-[3]: #mermaidapi-configuration-defaults
-[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
-[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[8]: https://developer.mozilla.org/docs/Web/API/Element
diff --git a/packages/mermaid/src/diagrams/timeline/diagram-definition.ts b/packages/mermaid/src/diagrams/timeline/diagram-definition.ts
index 9f18f261d..898af8b78 100644
--- a/packages/mermaid/src/diagrams/timeline/diagram-definition.ts
+++ b/packages/mermaid/src/diagrams/timeline/diagram-definition.ts
@@ -3,12 +3,10 @@ import parser from './parser/timeline.jison';
 import * as db from './timelineDb';
 import renderer from './timelineRenderer';
 import styles from './styles';
-import { injectUtils } from './mermaidUtils';
 
 export const diagram = {
   db,
   renderer,
   parser,
   styles,
-  injectUtils,
 };
diff --git a/packages/mermaid/src/diagrams/timeline/mermaidUtils.ts b/packages/mermaid/src/diagrams/timeline/mermaidUtils.ts
deleted file mode 100644
index 0c6469203..000000000
--- a/packages/mermaid/src/diagrams/timeline/mermaidUtils.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-const warning = () => null;
-let localCommonDb = {};
-
-export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
-
-export const LEVELS: Record = {
-  trace: 0,
-  debug: 1,
-  info: 2,
-  warn: 3,
-  error: 4,
-  fatal: 5,
-};
-
-export const log: Record = {
-  trace: warning,
-  debug: warning,
-  info: warning,
-  warn: warning,
-  error: warning,
-  fatal: warning,
-};
-export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
-export let getConfig: () => object;
-export let sanitizeText: (str: string) => string;
-export const getCommonDb = () => localCommonDb;
-export let parseDirective = (p: any, statement: string, context: string, type: string) => {
-  return;
-};
-/**
- * Placeholder for the real function that will be injected by mermaid.
- */
-// eslint-disable @typescript-eslint/no-explicit-any
-export let setupGraphViewbox: (
-  graph: any,
-  svgElem: any,
-  padding: any,
-  useMaxWidth: boolean
-) => void;
-
-/**
- * Function called by mermaid that injects utility functions that help the diagram to be a good citizen.
- * @param _log - The log function to use
- * @param _setLogLevel - The function to set the log level
- * @param _getConfig - The function to get the configuration
- * @param _sanitizeText - The function to sanitize text
- * @param _setupGraphViewbox - The function to setup the graph view-box
- * @param _commonDb - The common database
- */
-export const injectUtils = (
-  _log: Record,
-  _setLogLevel: any,
-  _getConfig: any,
-  _sanitizeText: any,
-  _setupGraphViewbox: any,
-  _commonDb: any,
-  _parseDirective: any
-) => {
-  _log.debug('Mermaid utils injected into timeline-diagram');
-  log.trace = _log.trace;
-  log.debug = _log.debug;
-  log.info = _log.info;
-  log.warn = _log.warn;
-  log.error = _log.error;
-  log.fatal = _log.fatal;
-  setLogLevel = _setLogLevel;
-  getConfig = _getConfig;
-  sanitizeText = _sanitizeText;
-  setupGraphViewbox = _setupGraphViewbox;
-  localCommonDb = _commonDb;
-  parseDirective = _parseDirective;
-};
diff --git a/packages/mermaid/src/diagrams/timeline/parser/timeline.jison b/packages/mermaid/src/diagrams/timeline/parser/timeline.jison
index db22a9bcf..59b96516a 100644
--- a/packages/mermaid/src/diagrams/timeline/parser/timeline.jison
+++ b/packages/mermaid/src/diagrams/timeline/parser/timeline.jison
@@ -1,6 +1,6 @@
 /** mermaid
  *  https://mermaidjs.github.io/
- *  (c) 2015 Knut Sveidqvist
+ *  (c) 2023 Knut Sveidqvist
  *  MIT license.
  */
 %lex

From ce037a84cafdc6b89da5f842c21e976aa569dbb9 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 8 Feb 2023 13:16:33 +0100
Subject: [PATCH 24/26] Fixing build after last batch of changes

---
 package.json                                  |  3 ++
 .../src/diagrams/timeline/timelineDb.js       | 12 ++----
 .../src/diagrams/timeline/timelineRenderer.ts |  4 +-
 packages/mermaid/src/mermaid.ts               |  1 -
 pnpm-lock.yaml                                | 37 +++++++++----------
 5 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index e7cb9bdf0..1b43df2b4 100644
--- a/package.json
+++ b/package.json
@@ -110,5 +110,8 @@
   },
   "volta": {
     "node": "18.13.0"
+  },
+  "dependencies": {
+    "remark-frontmatter": "^4.0.1"
   }
 }
diff --git a/packages/mermaid/src/diagrams/timeline/timelineDb.js b/packages/mermaid/src/diagrams/timeline/timelineDb.js
index dca0728c8..7bc5c2692 100644
--- a/packages/mermaid/src/diagrams/timeline/timelineDb.js
+++ b/packages/mermaid/src/diagrams/timeline/timelineDb.js
@@ -1,9 +1,5 @@
-import {
-  getCommonDb as _getCommonDb,
-  parseDirective as _parseDirective,
-  log,
-} from './mermaidUtils';
-
+import { parseDirective as _parseDirective } from '../../directiveUtils';
+import * as commonDb from '../../commonDb';
 let currentSection = '';
 let currentTaskId = 0;
 
@@ -11,7 +7,7 @@ const sections = [];
 const tasks = [];
 const rawTasks = [];
 
-export const getCommonDb = _getCommonDb;
+export const getCommonDb = () => commonDb;
 
 export const parseDirective = (statement, context, type) => {
   _parseDirective(this, statement, context, type);
@@ -22,7 +18,7 @@ export const clear = function () {
   tasks.length = 0;
   currentSection = '';
   rawTasks.length = 0;
-  _getCommonDb().clear();
+  commonDb.clear();
 };
 
 export const addSection = function (txt) {
diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
index 613e3ff48..02e706bf6 100644
--- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
+++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
@@ -1,7 +1,9 @@
 // @ts-nocheck TODO: fix file
 import { select } from 'd3';
 import svgDraw from './svgDraw';
-import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
+import { log } from '../../logger';
+import { getConfig } from '../../config';
+import { setupGraphViewbox } from '../../setupGraphViewbox';
 
 export const setConf = function (cnf) {
   const keys = Object.keys(cnf);
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index a6eda5778..be06c2167 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -330,7 +330,6 @@ const registerExternalDiagrams = async (
   }
 };
 
-externalDiagramsRegistered = true;
 /**
  * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
  * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 961304828..72e53be4e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,10 @@ lockfileVersion: 5.4-inlineSpecifiers
 importers:
 
   .:
+    dependencies:
+      remark-frontmatter:
+        specifier: ^4.0.1
+        version: 4.0.1
     devDependencies:
       '@applitools/eyes-cypress':
         specifier: ^3.27.6
@@ -2996,7 +3000,6 @@ packages:
     resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==}
     dependencies:
       '@types/unist': 2.0.6
-    dev: true
 
   /@types/mdurl/1.0.2:
     resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
@@ -3125,7 +3128,6 @@ packages:
 
   /@types/unist/2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
-    dev: true
 
   /@types/uuid/8.3.4:
     resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
@@ -4122,7 +4124,7 @@ packages:
   /axios/0.21.4_debug@4.3.2:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2_debug@4.3.2
     transitivePeerDependencies:
       - debug
     dev: true
@@ -4201,7 +4203,6 @@ packages:
 
   /bail/2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
-    dev: true
 
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -6756,7 +6757,6 @@ packages:
 
   /extend/3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
-    dev: true
 
   /extract-zip/2.0.1_supports-color@8.1.1:
     resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
@@ -6819,7 +6819,6 @@ packages:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
     dependencies:
       format: 0.2.2
-    dev: true
 
   /faye-websocket/0.11.4:
     resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
@@ -6930,6 +6929,18 @@ packages:
         optional: true
     dev: true
 
+  /follow-redirects/1.15.2_debug@4.3.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dependencies:
+      debug: 4.3.2
+    dev: true
+
   /foreground-child/2.0.0:
     resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
     engines: {node: '>=8.0.0'}
@@ -6972,7 +6983,6 @@ packages:
   /format/0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
-    dev: true
 
   /forwarded/0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
@@ -7661,7 +7671,6 @@ packages:
   /is-buffer/2.0.5:
     resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
     engines: {node: '>=4'}
-    dev: true
 
   /is-builtin-module/3.2.0:
     resolution: {integrity: sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==}
@@ -7760,7 +7769,6 @@ packages:
   /is-plain-obj/4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
-    dev: true
 
   /is-plain-object/2.0.4:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
@@ -8912,7 +8920,6 @@ packages:
     resolution: {integrity: sha512-7itKvp0arEVNpCktOET/eLFAYaZ+0cNjVtFtIPxgQ5tV+3i+D4SDDTjTzPWl44LT59PC+xdx+glNTawBdF98Mw==}
     dependencies:
       micromark-extension-frontmatter: 1.0.0
-    dev: true
 
   /mdast-util-gfm-autolink-literal/1.0.2:
     resolution: {integrity: sha512-FzopkOd4xTTBeGXhXSBU0OCDDh5lUj2rd+HQqG92Ld+jL4lpUfgX2AT2OHAVP9aEeDKp7G92fuooSZcYJA3cRg==}
@@ -9090,7 +9097,6 @@ packages:
       fault: 2.0.1
       micromark-util-character: 1.1.0
       micromark-util-symbol: 1.0.1
-    dev: true
 
   /micromark-extension-gfm-autolink-literal/1.0.3:
     resolution: {integrity: sha512-i3dmvU0htawfWED8aHMMAzAVp/F0Z+0bPh3YrbTPPL1v4YAlCZpy5rBO5p0LPYiZo0zFVkoYh7vDU7yQSiCMjg==}
@@ -9213,7 +9219,6 @@ packages:
     dependencies:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
-    dev: true
 
   /micromark-util-chunked/1.0.0:
     resolution: {integrity: sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==}
@@ -9290,11 +9295,9 @@ packages:
 
   /micromark-util-symbol/1.0.1:
     resolution: {integrity: sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==}
-    dev: true
 
   /micromark-util-types/1.0.2:
     resolution: {integrity: sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==}
-    dev: true
 
   /micromark/2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
@@ -10326,7 +10329,6 @@ packages:
       mdast-util-frontmatter: 1.0.0
       micromark-extension-frontmatter: 1.0.0
       unified: 10.1.2
-    dev: true
 
   /remark-gfm/3.0.1:
     resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==}
@@ -11370,7 +11372,6 @@ packages:
 
   /trough/2.1.0:
     resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
-    dev: true
 
   /ts-dedent/2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
@@ -11589,7 +11590,6 @@ packages:
       is-plain-obj: 4.1.0
       trough: 2.1.0
       vfile: 5.3.5
-    dev: true
 
   /unique-string/2.0.0:
     resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
@@ -11616,7 +11616,6 @@ packages:
     resolution: {integrity: sha512-7A6eiDCs9UtjcwZOcCpM4aPII3bAAGv13E96IkawkOAW0OhH+yRxtY0lzo8KiHpzEMfH7Q+FizUmwp8Iqy5EWg==}
     dependencies:
       '@types/unist': 2.0.6
-    dev: true
 
   /unist-util-visit-parents/5.1.1:
     resolution: {integrity: sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==}
@@ -11757,7 +11756,6 @@ packages:
     dependencies:
       '@types/unist': 2.0.6
       unist-util-stringify-position: 3.0.2
-    dev: true
 
   /vfile/5.3.5:
     resolution: {integrity: sha512-U1ho2ga33eZ8y8pkbQLH54uKqGhFJ6GYIHnnG5AhRpAh3OWjkrRHKa/KogbmQn8We+c0KVV3rTOgR9V/WowbXQ==}
@@ -11766,7 +11764,6 @@ packages:
       is-buffer: 2.0.5
       unist-util-stringify-position: 3.0.2
       vfile-message: 3.1.2
-    dev: true
 
   /vite-node/0.27.1_@types+node@18.11.9:
     resolution: {integrity: sha512-d6+ue/3NzsfndWaPbYh/bFkHbmAWfDXI4B874zRx+WREnG6CUHUbBC8lKaRYZjeR6gCPN5m1aVNNRXBYICA9XA==}

From 580903051f23e19334617604f6cdd2a44de0736f Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 8 Feb 2023 13:40:41 +0100
Subject: [PATCH 25/26] Fixing broken test

---
 package.json                                  |  15 +-
 .../src/diagrams/timeline/timeline.spec.js    |  20 +-
 pnpm-lock.yaml                                | 254 +++++++++---------
 3 files changed, 138 insertions(+), 151 deletions(-)

diff --git a/package.json b/package.json
index 1b43df2b4..620f7dbeb 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "9.3.0-rc1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@7.25.1",
+  "packageManager": "pnpm@7.25.0",
   "keywords": [
     "diagram",
     "markdown",
@@ -23,7 +23,7 @@
     "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
     "release": "pnpm build",
-    "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
+    "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
     "lint:jison": "ts-node-esm ./scripts/jison/lint.mts",
     "cypress": "cypress run",
@@ -67,8 +67,8 @@
     "@types/node": "^18.11.9",
     "@types/prettier": "^2.7.1",
     "@types/rollup-plugin-visualizer": "^4.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "@typescript-eslint/parser": "^5.48.2",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
     "@vitest/coverage-c8": "^0.27.0",
     "@vitest/ui": "^0.27.0",
     "concurrently": "^7.5.0",
@@ -76,8 +76,8 @@
     "cypress": "^10.11.0",
     "cypress-image-snapshot": "^4.0.1",
     "esbuild": "^0.17.0",
-    "eslint": "^8.32.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.27.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-jest": "^27.1.5",
@@ -110,8 +110,5 @@
   },
   "volta": {
     "node": "18.13.0"
-  },
-  "dependencies": {
-    "remark-frontmatter": "^4.0.1"
   }
 }
diff --git a/packages/mermaid/src/diagrams/timeline/timeline.spec.js b/packages/mermaid/src/diagrams/timeline/timeline.spec.js
index 41047d764..0697b194e 100644
--- a/packages/mermaid/src/diagrams/timeline/timeline.spec.js
+++ b/packages/mermaid/src/diagrams/timeline/timeline.spec.js
@@ -1,6 +1,6 @@
 import { parser as timeline } from './parser/timeline';
 import * as timelineDB from './timelineDb';
-import { injectUtils } from './mermaidUtils';
+// import { injectUtils } from './mermaidUtils';
 import * as _commonDb from '../../commonDb';
 import { parseDirective as _parseDirective } from '../../directiveUtils';
 
@@ -12,15 +12,15 @@ import {
   setupGraphViewBox,
 } from '../../diagram-api/diagramAPI';
 
-injectUtils(
-  log,
-  setLogLevel,
-  getConfig,
-  sanitizeText,
-  setupGraphViewBox,
-  _commonDb,
-  _parseDirective
-);
+// injectUtils(
+//   log,
+//   setLogLevel,
+//   getConfig,
+//   sanitizeText,
+//   setupGraphViewBox,
+//   _commonDb,
+//   _parseDirective
+// );
 
 describe('when parsing a timeline ', function () {
   beforeEach(function () {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 72e53be4e..5d6ca2bda 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,10 +3,6 @@ lockfileVersion: 5.4-inlineSpecifiers
 importers:
 
   .:
-    dependencies:
-      remark-frontmatter:
-        specifier: ^4.0.1
-        version: 4.0.1
     devDependencies:
       '@applitools/eyes-cypress':
         specifier: ^3.27.6
@@ -48,11 +44,11 @@ importers:
         specifier: ^4.2.1
         version: 4.2.1
       '@typescript-eslint/eslint-plugin':
-        specifier: ^5.48.2
-        version: 5.48.2_iljmjqxcygjq3saipl7gerxpvi
+        specifier: ^5.42.1
+        version: 5.51.0_ea5vny3vf4guc7b4slvddguozq
       '@typescript-eslint/parser':
-        specifier: ^5.48.2
-        version: 5.48.2_yygwinqv3a2io74xmwofqb7uka
+        specifier: ^5.42.1
+        version: 5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4
       '@vitest/coverage-c8':
         specifier: ^0.27.0
         version: 0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce
@@ -75,32 +71,32 @@ importers:
         specifier: ^0.17.0
         version: 0.17.0
       eslint:
-        specifier: ^8.32.0
-        version: 8.32.0
+        specifier: ^8.27.0
+        version: 8.33.0
       eslint-config-prettier:
-        specifier: ^8.6.0
-        version: 8.6.0_eslint@8.32.0
+        specifier: ^8.5.0
+        version: 8.6.0_eslint@8.33.0
       eslint-plugin-cypress:
         specifier: ^2.12.1
-        version: 2.12.1_eslint@8.32.0
+        version: 2.12.1_eslint@8.33.0
       eslint-plugin-html:
         specifier: ^7.1.0
         version: 7.1.0
       eslint-plugin-jest:
         specifier: ^27.1.5
-        version: 27.1.5_5rcd23qw3h5vuffwo2owxb3hw4
+        version: 27.1.5_5egy7e47lxq7vf4ol2lvjduk2u
       eslint-plugin-jsdoc:
         specifier: ^39.6.2
-        version: 39.6.2_eslint@8.32.0
+        version: 39.6.2_eslint@8.33.0
       eslint-plugin-json:
         specifier: ^3.1.0
         version: 3.1.0
       eslint-plugin-lodash:
         specifier: ^7.4.0
-        version: 7.4.0_eslint@8.32.0
+        version: 7.4.0_eslint@8.33.0
       eslint-plugin-markdown:
         specifier: ^3.0.0
-        version: 3.0.0_eslint@8.32.0
+        version: 3.0.0_eslint@8.33.0
       eslint-plugin-no-only-tests:
         specifier: ^3.1.0
         version: 3.1.0
@@ -109,7 +105,7 @@ importers:
         version: 0.2.17
       eslint-plugin-unicorn:
         specifier: ^45.0.0
-        version: 45.0.0_eslint@8.32.0
+        version: 45.0.0_eslint@8.33.0
       express:
         specifier: ^4.18.2
         version: 4.18.2
@@ -233,10 +229,10 @@ importers:
         version: 8.3.4
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.42.1
-        version: 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
+        version: 5.42.1_2kuwieraxvrmnnxygbwcc7q6te
       '@typescript-eslint/parser':
         specifier: ^5.42.1
-        version: 5.42.1_yygwinqv3a2io74xmwofqb7uka
+        version: 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
       chokidar:
         specifier: ^3.5.3
         version: 3.5.3
@@ -353,22 +349,6 @@ importers:
         specifier: ^3.0.2
         version: 3.0.2
 
-  packages/mermaid-timeline:
-    dependencies:
-      d3:
-        specifier: ^7.0.0
-        version: 7.6.1
-      khroma:
-        specifier: ^2.0.0
-        version: 2.0.0
-    devDependencies:
-      concurrently:
-        specifier: ^7.4.0
-        version: 7.5.0
-      rimraf:
-        specifier: ^3.0.2
-        version: 3.0.2
-
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-mindmap':
@@ -2174,7 +2154,7 @@ packages:
       ajv: 6.12.6
       debug: 4.3.4
       espree: 9.4.0
-      globals: 13.19.0
+      globals: 13.20.0
       ignore: 5.2.0
       import-fresh: 3.3.0
       js-yaml: 4.1.0
@@ -3000,6 +2980,7 @@ packages:
     resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==}
     dependencies:
       '@types/unist': 2.0.6
+    dev: true
 
   /@types/mdurl/1.0.2:
     resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
@@ -3128,6 +3109,7 @@ packages:
 
   /@types/unist/2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
+    dev: true
 
   /@types/uuid/8.3.4:
     resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
@@ -3161,7 +3143,7 @@ packages:
     dev: true
     optional: true
 
-  /@typescript-eslint/eslint-plugin/5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq:
+  /@typescript-eslint/eslint-plugin/5.42.1_2kuwieraxvrmnnxygbwcc7q6te:
     resolution: {integrity: sha512-LyR6x784JCiJ1j6sH5Y0K6cdExqCCm8DJUTcwG5ThNXJj/G8o5E56u5EdG4SLy+bZAwZBswC+GYn3eGdttBVCg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3172,12 +3154,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/parser': 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
       '@typescript-eslint/scope-manager': 5.42.1
-      '@typescript-eslint/type-utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
-      '@typescript-eslint/utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/type-utils': 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
+      '@typescript-eslint/utils': 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
       debug: 4.3.4
-      eslint: 8.32.0
+      eslint: 8.33.0
       ignore: 5.2.0
       natural-compare-lite: 1.4.0
       regexpp: 3.2.0
@@ -3188,8 +3170,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.48.2_iljmjqxcygjq3saipl7gerxpvi:
-    resolution: {integrity: sha512-sR0Gja9Ky1teIq4qJOl0nC+Tk64/uYdX+mi+5iB//MH8gwyx8e3SOyhEzeLZEFEEfCaLf8KJq+Bd/6je1t+CAg==}
+  /@typescript-eslint/eslint-plugin/5.51.0_ea5vny3vf4guc7b4slvddguozq:
+    resolution: {integrity: sha512-wcAwhEWm1RgNd7dxD/o+nnLW8oH+6RK1OGnmbmkj/GGoDPV1WWMVP0FXYQBivKHdwM1pwii3bt//RC62EriIUQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -3199,12 +3181,13 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.48.2_yygwinqv3a2io74xmwofqb7uka
-      '@typescript-eslint/scope-manager': 5.48.2
-      '@typescript-eslint/type-utils': 5.48.2_yygwinqv3a2io74xmwofqb7uka
-      '@typescript-eslint/utils': 5.48.2_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/parser': 5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4
+      '@typescript-eslint/scope-manager': 5.51.0
+      '@typescript-eslint/type-utils': 5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4
+      '@typescript-eslint/utils': 5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4
       debug: 4.3.4
-      eslint: 8.32.0
+      eslint: 8.33.0
+      grapheme-splitter: 1.0.4
       ignore: 5.2.0
       natural-compare-lite: 1.4.0
       regexpp: 3.2.0
@@ -3215,7 +3198,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.42.1_yygwinqv3a2io74xmwofqb7uka:
+  /@typescript-eslint/parser/5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4:
     resolution: {integrity: sha512-kAV+NiNBWVQDY9gDJDToTE/NO8BHi4f6b7zTsVAJoTkmB/zlfOpiEVBzHOKtlgTndCKe8vj9F/PuolemZSh50Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3229,14 +3212,14 @@ packages:
       '@typescript-eslint/types': 5.42.1
       '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
       debug: 4.3.4
-      eslint: 8.32.0
+      eslint: 8.33.0
       typescript: 4.8.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.48.2_yygwinqv3a2io74xmwofqb7uka:
-    resolution: {integrity: sha512-38zMsKsG2sIuM5Oi/olurGwYJXzmtdsHhn5mI/pQogP+BjYVkK5iRazCQ8RGS0V+YLk282uWElN70zAAUmaYHw==}
+  /@typescript-eslint/parser/5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4:
+    resolution: {integrity: sha512-fEV0R9gGmfpDeRzJXn+fGQKcl0inIeYobmmUWijZh9zA7bxJ8clPhV9up2ZQzATxAiFAECqPQyMDB4o4B81AaA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -3245,11 +3228,11 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.48.2
-      '@typescript-eslint/types': 5.48.2
-      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.8.4
+      '@typescript-eslint/scope-manager': 5.51.0
+      '@typescript-eslint/types': 5.51.0
+      '@typescript-eslint/typescript-estree': 5.51.0_typescript@4.8.4
       debug: 4.3.4
-      eslint: 8.32.0
+      eslint: 8.33.0
       typescript: 4.8.4
     transitivePeerDependencies:
       - supports-color
@@ -3263,15 +3246,15 @@ packages:
       '@typescript-eslint/visitor-keys': 5.42.1
     dev: true
 
-  /@typescript-eslint/scope-manager/5.48.2:
-    resolution: {integrity: sha512-zEUFfonQid5KRDKoI3O+uP1GnrFd4tIHlvs+sTJXiWuypUWMuDaottkJuR612wQfOkjYbsaskSIURV9xo4f+Fw==}
+  /@typescript-eslint/scope-manager/5.51.0:
+    resolution: {integrity: sha512-gNpxRdlx5qw3yaHA0SFuTjW4rxeYhpHxt491PEcKF8Z6zpq0kMhe0Tolxt0qjlojS+/wArSDlj/LtE69xUJphQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.48.2
-      '@typescript-eslint/visitor-keys': 5.48.2
+      '@typescript-eslint/types': 5.51.0
+      '@typescript-eslint/visitor-keys': 5.51.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.42.1_yygwinqv3a2io74xmwofqb7uka:
+  /@typescript-eslint/type-utils/5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4:
     resolution: {integrity: sha512-WWiMChneex5w4xPIX56SSnQQo0tEOy5ZV2dqmj8Z371LJ0E+aymWD25JQ/l4FOuuX+Q49A7pzh/CGIQflxMVXg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3282,17 +3265,17 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
-      '@typescript-eslint/utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/utils': 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
       debug: 4.3.4
-      eslint: 8.32.0
+      eslint: 8.33.0
       tsutils: 3.21.0_typescript@4.8.4
       typescript: 4.8.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/type-utils/5.48.2_yygwinqv3a2io74xmwofqb7uka:
-    resolution: {integrity: sha512-QVWx7J5sPMRiOMJp5dYshPxABRoZV1xbRirqSk8yuIIsu0nvMTZesKErEA3Oix1k+uvsk8Cs8TGJ6kQ0ndAcew==}
+  /@typescript-eslint/type-utils/5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4:
+    resolution: {integrity: sha512-QHC5KKyfV8sNSyHqfNa0UbTbJ6caB8uhcx2hYcWVvJAZYJRBo5HyyZfzMdRx8nvS+GyMg56fugMzzWnojREuQQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -3301,10 +3284,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.8.4
-      '@typescript-eslint/utils': 5.48.2_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/typescript-estree': 5.51.0_typescript@4.8.4
+      '@typescript-eslint/utils': 5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4
       debug: 4.3.4
-      eslint: 8.32.0
+      eslint: 8.33.0
       tsutils: 3.21.0_typescript@4.8.4
       typescript: 4.8.4
     transitivePeerDependencies:
@@ -3316,8 +3299,8 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/types/5.48.2:
-    resolution: {integrity: sha512-hE7dA77xxu7ByBc6KCzikgfRyBCTst6dZQpwaTy25iMYOnbNljDT4hjhrGEJJ0QoMjrfqrx+j1l1B9/LtKeuqA==}
+  /@typescript-eslint/types/5.51.0:
+    resolution: {integrity: sha512-SqOn0ANn/v6hFn0kjvLwiDi4AzR++CBZz0NV5AnusT2/3y32jdc0G4woXPWHCumWtUXZKPAS27/9vziSsC9jnw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
@@ -3342,8 +3325,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.48.2_typescript@4.8.4:
-    resolution: {integrity: sha512-bibvD3z6ilnoVxUBFEgkO0k0aFvUc4Cttt0dAreEr+nrAHhWzkO83PEVVuieK3DqcgL6VAK5dkzK8XUVja5Zcg==}
+  /@typescript-eslint/typescript-estree/5.51.0_typescript@4.8.4:
+    resolution: {integrity: sha512-TSkNupHvNRkoH9FMA3w7TazVFcBPveAAmb7Sz+kArY6sLT86PA5Vx80cKlYmd8m3Ha2SwofM1KwraF24lM9FvA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -3351,8 +3334,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.48.2
-      '@typescript-eslint/visitor-keys': 5.48.2
+      '@typescript-eslint/types': 5.51.0
+      '@typescript-eslint/visitor-keys': 5.51.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
@@ -3363,7 +3346,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.42.1_yygwinqv3a2io74xmwofqb7uka:
+  /@typescript-eslint/utils/5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4:
     resolution: {integrity: sha512-Gxvf12xSp3iYZd/fLqiQRD4uKZjDNR01bQ+j8zvhPjpsZ4HmvEFL/tC4amGNyxN9Rq+iqvpHLhlqx6KTxz9ZyQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3374,29 +3357,29 @@ packages:
       '@typescript-eslint/scope-manager': 5.42.1
       '@typescript-eslint/types': 5.42.1
       '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
-      eslint: 8.32.0
+      eslint: 8.33.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.32.0
+      eslint-utils: 3.0.0_eslint@8.33.0
       semver: 7.3.8
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/utils/5.48.2_yygwinqv3a2io74xmwofqb7uka:
-    resolution: {integrity: sha512-2h18c0d7jgkw6tdKTlNaM7wyopbLRBiit8oAxoP89YnuBOzCZ8g8aBCaCqq7h208qUTroL7Whgzam7UY3HVLow==}
+  /@typescript-eslint/utils/5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4:
+    resolution: {integrity: sha512-76qs+5KWcaatmwtwsDJvBk4H76RJQBFe+Gext0EfJdC3Vd2kpY2Pf//OHHzHp84Ciw0/rYoGTDnIAr3uWhhJYw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.11
       '@types/semver': 7.3.12
-      '@typescript-eslint/scope-manager': 5.48.2
-      '@typescript-eslint/types': 5.48.2
-      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.8.4
-      eslint: 8.32.0
+      '@typescript-eslint/scope-manager': 5.51.0
+      '@typescript-eslint/types': 5.51.0
+      '@typescript-eslint/typescript-estree': 5.51.0_typescript@4.8.4
+      eslint: 8.33.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.32.0
+      eslint-utils: 3.0.0_eslint@8.33.0
       semver: 7.3.8
     transitivePeerDependencies:
       - supports-color
@@ -3411,11 +3394,11 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.48.2:
-    resolution: {integrity: sha512-z9njZLSkwmjFWUelGEwEbdf4NwKvfHxvGC0OcGN1Hp/XNDIcJ7D5DpPNPv6x6/mFvc1tQHsaWmpD/a4gOvvCJQ==}
+  /@typescript-eslint/visitor-keys/5.51.0:
+    resolution: {integrity: sha512-Oh2+eTdjHjOFjKA27sxESlA87YPSOJafGCR0md5oeMdh1ZcCfAGCIOL216uTBAkAIptvLIfKQhl7lHxMJet4GQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.48.2
+      '@typescript-eslint/types': 5.51.0
       eslint-visitor-keys: 3.3.0
     dev: true
 
@@ -3803,7 +3786,7 @@ packages:
   /acorn-globals/7.0.1:
     resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
     dependencies:
-      acorn: 8.8.0
+      acorn: 8.8.1
       acorn-walk: 8.2.0
     dev: true
 
@@ -4124,7 +4107,7 @@ packages:
   /axios/0.21.4_debug@4.3.2:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
-      follow-redirects: 1.15.2_debug@4.3.2
+      follow-redirects: 1.15.2
     transitivePeerDependencies:
       - debug
     dev: true
@@ -4203,6 +4186,7 @@ packages:
 
   /bail/2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+    dev: true
 
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -4760,7 +4744,7 @@ packages:
     dev: true
 
   /concat-map/0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
   /concurrently/7.5.0:
@@ -6321,21 +6305,21 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /eslint-config-prettier/8.6.0_eslint@8.32.0:
+  /eslint-config-prettier/8.6.0_eslint@8.33.0:
     resolution: {integrity: sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: 8.32.0
+      eslint: 8.33.0
     dev: true
 
-  /eslint-plugin-cypress/2.12.1_eslint@8.32.0:
+  /eslint-plugin-cypress/2.12.1_eslint@8.33.0:
     resolution: {integrity: sha512-c2W/uPADl5kospNDihgiLc7n87t5XhUbFDoTl6CfVkmG+kDAb5Ux10V9PoLPu9N+r7znpc+iQlcmAqT1A/89HA==}
     peerDependencies:
       eslint: '>= 3.2.1'
     dependencies:
-      eslint: 8.32.0
+      eslint: 8.33.0
       globals: 11.12.0
     dev: true
 
@@ -6345,7 +6329,7 @@ packages:
       htmlparser2: 8.0.1
     dev: true
 
-  /eslint-plugin-jest/27.1.5_5rcd23qw3h5vuffwo2owxb3hw4:
+  /eslint-plugin-jest/27.1.5_5egy7e47lxq7vf4ol2lvjduk2u:
     resolution: {integrity: sha512-CK2dekZ5VBdzsOSOH5Fc1rwC+cWXjkcyrmf1RV714nDUDKu+o73TTJiDxpbILG8PtPPpAAl3ywzh5QA7Ft0mjA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -6358,16 +6342,16 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.48.2_iljmjqxcygjq3saipl7gerxpvi
-      '@typescript-eslint/utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
-      eslint: 8.32.0
+      '@typescript-eslint/eslint-plugin': 5.51.0_ea5vny3vf4guc7b4slvddguozq
+      '@typescript-eslint/utils': 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
+      eslint: 8.33.0
       jest: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /eslint-plugin-jsdoc/39.6.2_eslint@8.32.0:
+  /eslint-plugin-jsdoc/39.6.2_eslint@8.33.0:
     resolution: {integrity: sha512-dvgY/W7eUFoAIIiaWHERIMI61ZWqcz9YFjEeyTzdPlrZc3TY/3aZm5aB91NUoTLWYZmO/vFlYSuQi15tF7uE5A==}
     engines: {node: ^14 || ^16 || ^17 || ^18 || ^19}
     peerDependencies:
@@ -6377,7 +6361,7 @@ packages:
       comment-parser: 1.3.1
       debug: 4.3.4
       escape-string-regexp: 4.0.0
-      eslint: 8.32.0
+      eslint: 8.33.0
       esquery: 1.4.0
       semver: 7.3.8
       spdx-expression-parse: 3.0.1
@@ -6393,23 +6377,23 @@ packages:
       vscode-json-languageservice: 4.2.1
     dev: true
 
-  /eslint-plugin-lodash/7.4.0_eslint@8.32.0:
+  /eslint-plugin-lodash/7.4.0_eslint@8.33.0:
     resolution: {integrity: sha512-Tl83UwVXqe1OVeBRKUeWcfg6/pCW1GTRObbdnbEJgYwjxp5Q92MEWQaH9+dmzbRt6kvYU1Mp893E79nJiCSM8A==}
     engines: {node: '>=10'}
     peerDependencies:
       eslint: '>=2'
     dependencies:
-      eslint: 8.32.0
+      eslint: 8.33.0
       lodash: 4.17.21
     dev: true
 
-  /eslint-plugin-markdown/3.0.0_eslint@8.32.0:
+  /eslint-plugin-markdown/3.0.0_eslint@8.33.0:
     resolution: {integrity: sha512-hRs5RUJGbeHDLfS7ELanT0e29Ocyssf/7kBM+p7KluY5AwngGkDf8Oyu4658/NZSGTTq05FZeWbkxXtbVyHPwg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.32.0
+      eslint: 8.33.0
       mdast-util-from-markdown: 0.8.5
     transitivePeerDependencies:
       - supports-color
@@ -6427,7 +6411,7 @@ packages:
       '@microsoft/tsdoc-config': 0.16.2
     dev: true
 
-  /eslint-plugin-unicorn/45.0.0_eslint@8.32.0:
+  /eslint-plugin-unicorn/45.0.0_eslint@8.33.0:
     resolution: {integrity: sha512-iP8cMRxXKHonKioOhnCoCcqVhoqhAp6rB+nsoLjXFDxTHz3btWMAp8xwzjHA0B1K6YV/U/Yvqn1bUXZt8sJPuQ==}
     engines: {node: '>=14.18'}
     peerDependencies:
@@ -6436,8 +6420,8 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       ci-info: 3.6.2
       clean-regexp: 1.0.0
-      eslint: 8.32.0
-      eslint-utils: 3.0.0_eslint@8.32.0
+      eslint: 8.33.0
+      eslint-utils: 3.0.0_eslint@8.33.0
       esquery: 1.4.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.0
@@ -6468,13 +6452,13 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@8.32.0:
+  /eslint-utils/3.0.0_eslint@8.33.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 8.32.0
+      eslint: 8.33.0
       eslint-visitor-keys: 2.1.0
     dev: true
 
@@ -6488,8 +6472,8 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint/8.32.0:
-    resolution: {integrity: sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==}
+  /eslint/8.33.0:
+    resolution: {integrity: sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -6504,7 +6488,7 @@ packages:
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.32.0
+      eslint-utils: 3.0.0_eslint@8.33.0
       eslint-visitor-keys: 3.3.0
       espree: 9.4.0
       esquery: 1.4.0
@@ -6513,7 +6497,7 @@ packages:
       file-entry-cache: 6.0.1
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.19.0
+      globals: 13.20.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.0
       import-fresh: 3.3.0
@@ -6757,6 +6741,7 @@ packages:
 
   /extend/3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+    dev: true
 
   /extract-zip/2.0.1_supports-color@8.1.1:
     resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
@@ -6819,6 +6804,7 @@ packages:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
     dependencies:
       format: 0.2.2
+    dev: true
 
   /faye-websocket/0.11.4:
     resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
@@ -6929,18 +6915,6 @@ packages:
         optional: true
     dev: true
 
-  /follow-redirects/1.15.2_debug@4.3.2:
-    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dependencies:
-      debug: 4.3.2
-    dev: true
-
   /foreground-child/2.0.0:
     resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
     engines: {node: '>=8.0.0'}
@@ -6983,6 +6957,7 @@ packages:
   /format/0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
+    dev: true
 
   /forwarded/0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
@@ -7221,8 +7196,8 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /globals/13.19.0:
-    resolution: {integrity: sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==}
+  /globals/13.20.0:
+    resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
     engines: {node: '>=8'}
     dependencies:
       type-fest: 0.20.2
@@ -7671,6 +7646,7 @@ packages:
   /is-buffer/2.0.5:
     resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
     engines: {node: '>=4'}
+    dev: true
 
   /is-builtin-module/3.2.0:
     resolution: {integrity: sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==}
@@ -7769,6 +7745,7 @@ packages:
   /is-plain-obj/4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
+    dev: true
 
   /is-plain-object/2.0.4:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
@@ -8916,10 +8893,13 @@ packages:
       - supports-color
     dev: true
 
-  /mdast-util-frontmatter/1.0.0:
-    resolution: {integrity: sha512-7itKvp0arEVNpCktOET/eLFAYaZ+0cNjVtFtIPxgQ5tV+3i+D4SDDTjTzPWl44LT59PC+xdx+glNTawBdF98Mw==}
+  /mdast-util-frontmatter/1.0.1:
+    resolution: {integrity: sha512-JjA2OjxRqAa8wEG8hloD0uTU0kdn8kbtOWpPP94NBkfAlbxn4S8gCGf/9DwFtEeGPXrDcNXdiDjVaRdUFqYokw==}
     dependencies:
+      '@types/mdast': 3.0.10
+      mdast-util-to-markdown: 1.3.0
       micromark-extension-frontmatter: 1.0.0
+    dev: true
 
   /mdast-util-gfm-autolink-literal/1.0.2:
     resolution: {integrity: sha512-FzopkOd4xTTBeGXhXSBU0OCDDh5lUj2rd+HQqG92Ld+jL4lpUfgX2AT2OHAVP9aEeDKp7G92fuooSZcYJA3cRg==}
@@ -9097,6 +9077,7 @@ packages:
       fault: 2.0.1
       micromark-util-character: 1.1.0
       micromark-util-symbol: 1.0.1
+    dev: true
 
   /micromark-extension-gfm-autolink-literal/1.0.3:
     resolution: {integrity: sha512-i3dmvU0htawfWED8aHMMAzAVp/F0Z+0bPh3YrbTPPL1v4YAlCZpy5rBO5p0LPYiZo0zFVkoYh7vDU7yQSiCMjg==}
@@ -9219,6 +9200,7 @@ packages:
     dependencies:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
+    dev: true
 
   /micromark-util-chunked/1.0.0:
     resolution: {integrity: sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==}
@@ -9295,9 +9277,11 @@ packages:
 
   /micromark-util-symbol/1.0.1:
     resolution: {integrity: sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==}
+    dev: true
 
   /micromark-util-types/1.0.2:
     resolution: {integrity: sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==}
+    dev: true
 
   /micromark/2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
@@ -10326,9 +10310,10 @@ packages:
     resolution: {integrity: sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==}
     dependencies:
       '@types/mdast': 3.0.10
-      mdast-util-frontmatter: 1.0.0
+      mdast-util-frontmatter: 1.0.1
       micromark-extension-frontmatter: 1.0.0
       unified: 10.1.2
+    dev: true
 
   /remark-gfm/3.0.1:
     resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==}
@@ -11234,7 +11219,7 @@ packages:
     hasBin: true
     dependencies:
       '@jridgewell/source-map': 0.3.2
-      acorn: 8.8.0
+      acorn: 8.8.1
       commander: 2.20.3
       source-map-support: 0.5.21
     dev: true
@@ -11372,6 +11357,7 @@ packages:
 
   /trough/2.1.0:
     resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
+    dev: true
 
   /ts-dedent/2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
@@ -11590,6 +11576,7 @@ packages:
       is-plain-obj: 4.1.0
       trough: 2.1.0
       vfile: 5.3.5
+    dev: true
 
   /unique-string/2.0.0:
     resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
@@ -11616,6 +11603,7 @@ packages:
     resolution: {integrity: sha512-7A6eiDCs9UtjcwZOcCpM4aPII3bAAGv13E96IkawkOAW0OhH+yRxtY0lzo8KiHpzEMfH7Q+FizUmwp8Iqy5EWg==}
     dependencies:
       '@types/unist': 2.0.6
+    dev: true
 
   /unist-util-visit-parents/5.1.1:
     resolution: {integrity: sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==}
@@ -11756,6 +11744,7 @@ packages:
     dependencies:
       '@types/unist': 2.0.6
       unist-util-stringify-position: 3.0.2
+    dev: true
 
   /vfile/5.3.5:
     resolution: {integrity: sha512-U1ho2ga33eZ8y8pkbQLH54uKqGhFJ6GYIHnnG5AhRpAh3OWjkrRHKa/KogbmQn8We+c0KVV3rTOgR9V/WowbXQ==}
@@ -11764,6 +11753,7 @@ packages:
       is-buffer: 2.0.5
       unist-util-stringify-position: 3.0.2
       vfile-message: 3.1.2
+    dev: true
 
   /vite-node/0.27.1_@types+node@18.11.9:
     resolution: {integrity: sha512-d6+ue/3NzsfndWaPbYh/bFkHbmAWfDXI4B874zRx+WREnG6CUHUbBC8lKaRYZjeR6gCPN5m1aVNNRXBYICA9XA==}

From 82f7e1b754539bedec06df459f45e68fc58e9bd7 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 8 Feb 2023 13:50:58 +0100
Subject: [PATCH 26/26] Version updates

---
 package.json   |  12 +--
 pnpm-lock.yaml | 217 ++++++++++++++++++++++++++-----------------------
 2 files changed, 121 insertions(+), 108 deletions(-)

diff --git a/package.json b/package.json
index 620f7dbeb..e7cb9bdf0 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "9.3.0-rc1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@7.25.0",
+  "packageManager": "pnpm@7.25.1",
   "keywords": [
     "diagram",
     "markdown",
@@ -23,7 +23,7 @@
     "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
     "release": "pnpm build",
-    "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
+    "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
     "lint:jison": "ts-node-esm ./scripts/jison/lint.mts",
     "cypress": "cypress run",
@@ -67,8 +67,8 @@
     "@types/node": "^18.11.9",
     "@types/prettier": "^2.7.1",
     "@types/rollup-plugin-visualizer": "^4.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
     "@vitest/coverage-c8": "^0.27.0",
     "@vitest/ui": "^0.27.0",
     "concurrently": "^7.5.0",
@@ -76,8 +76,8 @@
     "cypress": "^10.11.0",
     "cypress-image-snapshot": "^4.0.1",
     "esbuild": "^0.17.0",
-    "eslint": "^8.27.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-jest": "^27.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5d6ca2bda..961304828 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,11 +44,11 @@ importers:
         specifier: ^4.2.1
         version: 4.2.1
       '@typescript-eslint/eslint-plugin':
-        specifier: ^5.42.1
-        version: 5.51.0_ea5vny3vf4guc7b4slvddguozq
+        specifier: ^5.48.2
+        version: 5.48.2_iljmjqxcygjq3saipl7gerxpvi
       '@typescript-eslint/parser':
-        specifier: ^5.42.1
-        version: 5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4
+        specifier: ^5.48.2
+        version: 5.48.2_yygwinqv3a2io74xmwofqb7uka
       '@vitest/coverage-c8':
         specifier: ^0.27.0
         version: 0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce
@@ -71,32 +71,32 @@ importers:
         specifier: ^0.17.0
         version: 0.17.0
       eslint:
-        specifier: ^8.27.0
-        version: 8.33.0
+        specifier: ^8.32.0
+        version: 8.32.0
       eslint-config-prettier:
-        specifier: ^8.5.0
-        version: 8.6.0_eslint@8.33.0
+        specifier: ^8.6.0
+        version: 8.6.0_eslint@8.32.0
       eslint-plugin-cypress:
         specifier: ^2.12.1
-        version: 2.12.1_eslint@8.33.0
+        version: 2.12.1_eslint@8.32.0
       eslint-plugin-html:
         specifier: ^7.1.0
         version: 7.1.0
       eslint-plugin-jest:
         specifier: ^27.1.5
-        version: 27.1.5_5egy7e47lxq7vf4ol2lvjduk2u
+        version: 27.1.5_5rcd23qw3h5vuffwo2owxb3hw4
       eslint-plugin-jsdoc:
         specifier: ^39.6.2
-        version: 39.6.2_eslint@8.33.0
+        version: 39.6.2_eslint@8.32.0
       eslint-plugin-json:
         specifier: ^3.1.0
         version: 3.1.0
       eslint-plugin-lodash:
         specifier: ^7.4.0
-        version: 7.4.0_eslint@8.33.0
+        version: 7.4.0_eslint@8.32.0
       eslint-plugin-markdown:
         specifier: ^3.0.0
-        version: 3.0.0_eslint@8.33.0
+        version: 3.0.0_eslint@8.32.0
       eslint-plugin-no-only-tests:
         specifier: ^3.1.0
         version: 3.1.0
@@ -105,7 +105,7 @@ importers:
         version: 0.2.17
       eslint-plugin-unicorn:
         specifier: ^45.0.0
-        version: 45.0.0_eslint@8.33.0
+        version: 45.0.0_eslint@8.32.0
       express:
         specifier: ^4.18.2
         version: 4.18.2
@@ -229,10 +229,10 @@ importers:
         version: 8.3.4
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.42.1
-        version: 5.42.1_2kuwieraxvrmnnxygbwcc7q6te
+        version: 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
       '@typescript-eslint/parser':
         specifier: ^5.42.1
-        version: 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
+        version: 5.42.1_yygwinqv3a2io74xmwofqb7uka
       chokidar:
         specifier: ^3.5.3
         version: 3.5.3
@@ -349,6 +349,22 @@ importers:
         specifier: ^3.0.2
         version: 3.0.2
 
+  packages/mermaid-timeline:
+    dependencies:
+      d3:
+        specifier: ^7.0.0
+        version: 7.6.1
+      khroma:
+        specifier: ^2.0.0
+        version: 2.0.0
+    devDependencies:
+      concurrently:
+        specifier: ^7.4.0
+        version: 7.5.0
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-mindmap':
@@ -2154,7 +2170,7 @@ packages:
       ajv: 6.12.6
       debug: 4.3.4
       espree: 9.4.0
-      globals: 13.20.0
+      globals: 13.19.0
       ignore: 5.2.0
       import-fresh: 3.3.0
       js-yaml: 4.1.0
@@ -3143,7 +3159,7 @@ packages:
     dev: true
     optional: true
 
-  /@typescript-eslint/eslint-plugin/5.42.1_2kuwieraxvrmnnxygbwcc7q6te:
+  /@typescript-eslint/eslint-plugin/5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq:
     resolution: {integrity: sha512-LyR6x784JCiJ1j6sH5Y0K6cdExqCCm8DJUTcwG5ThNXJj/G8o5E56u5EdG4SLy+bZAwZBswC+GYn3eGdttBVCg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3154,12 +3170,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
+      '@typescript-eslint/parser': 5.42.1_yygwinqv3a2io74xmwofqb7uka
       '@typescript-eslint/scope-manager': 5.42.1
-      '@typescript-eslint/type-utils': 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
-      '@typescript-eslint/utils': 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
+      '@typescript-eslint/type-utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
       debug: 4.3.4
-      eslint: 8.33.0
+      eslint: 8.32.0
       ignore: 5.2.0
       natural-compare-lite: 1.4.0
       regexpp: 3.2.0
@@ -3170,8 +3186,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.51.0_ea5vny3vf4guc7b4slvddguozq:
-    resolution: {integrity: sha512-wcAwhEWm1RgNd7dxD/o+nnLW8oH+6RK1OGnmbmkj/GGoDPV1WWMVP0FXYQBivKHdwM1pwii3bt//RC62EriIUQ==}
+  /@typescript-eslint/eslint-plugin/5.48.2_iljmjqxcygjq3saipl7gerxpvi:
+    resolution: {integrity: sha512-sR0Gja9Ky1teIq4qJOl0nC+Tk64/uYdX+mi+5iB//MH8gwyx8e3SOyhEzeLZEFEEfCaLf8KJq+Bd/6je1t+CAg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -3181,13 +3197,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4
-      '@typescript-eslint/scope-manager': 5.51.0
-      '@typescript-eslint/type-utils': 5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4
-      '@typescript-eslint/utils': 5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4
+      '@typescript-eslint/parser': 5.48.2_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/scope-manager': 5.48.2
+      '@typescript-eslint/type-utils': 5.48.2_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/utils': 5.48.2_yygwinqv3a2io74xmwofqb7uka
       debug: 4.3.4
-      eslint: 8.33.0
-      grapheme-splitter: 1.0.4
+      eslint: 8.32.0
       ignore: 5.2.0
       natural-compare-lite: 1.4.0
       regexpp: 3.2.0
@@ -3198,7 +3213,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4:
+  /@typescript-eslint/parser/5.42.1_yygwinqv3a2io74xmwofqb7uka:
     resolution: {integrity: sha512-kAV+NiNBWVQDY9gDJDToTE/NO8BHi4f6b7zTsVAJoTkmB/zlfOpiEVBzHOKtlgTndCKe8vj9F/PuolemZSh50Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3212,14 +3227,14 @@ packages:
       '@typescript-eslint/types': 5.42.1
       '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
       debug: 4.3.4
-      eslint: 8.33.0
+      eslint: 8.32.0
       typescript: 4.8.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4:
-    resolution: {integrity: sha512-fEV0R9gGmfpDeRzJXn+fGQKcl0inIeYobmmUWijZh9zA7bxJ8clPhV9up2ZQzATxAiFAECqPQyMDB4o4B81AaA==}
+  /@typescript-eslint/parser/5.48.2_yygwinqv3a2io74xmwofqb7uka:
+    resolution: {integrity: sha512-38zMsKsG2sIuM5Oi/olurGwYJXzmtdsHhn5mI/pQogP+BjYVkK5iRazCQ8RGS0V+YLk282uWElN70zAAUmaYHw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -3228,11 +3243,11 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.51.0
-      '@typescript-eslint/types': 5.51.0
-      '@typescript-eslint/typescript-estree': 5.51.0_typescript@4.8.4
+      '@typescript-eslint/scope-manager': 5.48.2
+      '@typescript-eslint/types': 5.48.2
+      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.8.4
       debug: 4.3.4
-      eslint: 8.33.0
+      eslint: 8.32.0
       typescript: 4.8.4
     transitivePeerDependencies:
       - supports-color
@@ -3246,15 +3261,15 @@ packages:
       '@typescript-eslint/visitor-keys': 5.42.1
     dev: true
 
-  /@typescript-eslint/scope-manager/5.51.0:
-    resolution: {integrity: sha512-gNpxRdlx5qw3yaHA0SFuTjW4rxeYhpHxt491PEcKF8Z6zpq0kMhe0Tolxt0qjlojS+/wArSDlj/LtE69xUJphQ==}
+  /@typescript-eslint/scope-manager/5.48.2:
+    resolution: {integrity: sha512-zEUFfonQid5KRDKoI3O+uP1GnrFd4tIHlvs+sTJXiWuypUWMuDaottkJuR612wQfOkjYbsaskSIURV9xo4f+Fw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.51.0
-      '@typescript-eslint/visitor-keys': 5.51.0
+      '@typescript-eslint/types': 5.48.2
+      '@typescript-eslint/visitor-keys': 5.48.2
     dev: true
 
-  /@typescript-eslint/type-utils/5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4:
+  /@typescript-eslint/type-utils/5.42.1_yygwinqv3a2io74xmwofqb7uka:
     resolution: {integrity: sha512-WWiMChneex5w4xPIX56SSnQQo0tEOy5ZV2dqmj8Z371LJ0E+aymWD25JQ/l4FOuuX+Q49A7pzh/CGIQflxMVXg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3265,17 +3280,17 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
-      '@typescript-eslint/utils': 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
+      '@typescript-eslint/utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
       debug: 4.3.4
-      eslint: 8.33.0
+      eslint: 8.32.0
       tsutils: 3.21.0_typescript@4.8.4
       typescript: 4.8.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/type-utils/5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4:
-    resolution: {integrity: sha512-QHC5KKyfV8sNSyHqfNa0UbTbJ6caB8uhcx2hYcWVvJAZYJRBo5HyyZfzMdRx8nvS+GyMg56fugMzzWnojREuQQ==}
+  /@typescript-eslint/type-utils/5.48.2_yygwinqv3a2io74xmwofqb7uka:
+    resolution: {integrity: sha512-QVWx7J5sPMRiOMJp5dYshPxABRoZV1xbRirqSk8yuIIsu0nvMTZesKErEA3Oix1k+uvsk8Cs8TGJ6kQ0ndAcew==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -3284,10 +3299,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.51.0_typescript@4.8.4
-      '@typescript-eslint/utils': 5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4
+      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.8.4
+      '@typescript-eslint/utils': 5.48.2_yygwinqv3a2io74xmwofqb7uka
       debug: 4.3.4
-      eslint: 8.33.0
+      eslint: 8.32.0
       tsutils: 3.21.0_typescript@4.8.4
       typescript: 4.8.4
     transitivePeerDependencies:
@@ -3299,8 +3314,8 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/types/5.51.0:
-    resolution: {integrity: sha512-SqOn0ANn/v6hFn0kjvLwiDi4AzR++CBZz0NV5AnusT2/3y32jdc0G4woXPWHCumWtUXZKPAS27/9vziSsC9jnw==}
+  /@typescript-eslint/types/5.48.2:
+    resolution: {integrity: sha512-hE7dA77xxu7ByBc6KCzikgfRyBCTst6dZQpwaTy25iMYOnbNljDT4hjhrGEJJ0QoMjrfqrx+j1l1B9/LtKeuqA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
@@ -3325,8 +3340,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.51.0_typescript@4.8.4:
-    resolution: {integrity: sha512-TSkNupHvNRkoH9FMA3w7TazVFcBPveAAmb7Sz+kArY6sLT86PA5Vx80cKlYmd8m3Ha2SwofM1KwraF24lM9FvA==}
+  /@typescript-eslint/typescript-estree/5.48.2_typescript@4.8.4:
+    resolution: {integrity: sha512-bibvD3z6ilnoVxUBFEgkO0k0aFvUc4Cttt0dAreEr+nrAHhWzkO83PEVVuieK3DqcgL6VAK5dkzK8XUVja5Zcg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -3334,8 +3349,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.51.0
-      '@typescript-eslint/visitor-keys': 5.51.0
+      '@typescript-eslint/types': 5.48.2
+      '@typescript-eslint/visitor-keys': 5.48.2
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
@@ -3346,7 +3361,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4:
+  /@typescript-eslint/utils/5.42.1_yygwinqv3a2io74xmwofqb7uka:
     resolution: {integrity: sha512-Gxvf12xSp3iYZd/fLqiQRD4uKZjDNR01bQ+j8zvhPjpsZ4HmvEFL/tC4amGNyxN9Rq+iqvpHLhlqx6KTxz9ZyQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3357,29 +3372,29 @@ packages:
       '@typescript-eslint/scope-manager': 5.42.1
       '@typescript-eslint/types': 5.42.1
       '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
-      eslint: 8.33.0
+      eslint: 8.32.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.33.0
+      eslint-utils: 3.0.0_eslint@8.32.0
       semver: 7.3.8
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/utils/5.51.0_o2s6jvgtr2hafiobaqfgu6k2l4:
-    resolution: {integrity: sha512-76qs+5KWcaatmwtwsDJvBk4H76RJQBFe+Gext0EfJdC3Vd2kpY2Pf//OHHzHp84Ciw0/rYoGTDnIAr3uWhhJYw==}
+  /@typescript-eslint/utils/5.48.2_yygwinqv3a2io74xmwofqb7uka:
+    resolution: {integrity: sha512-2h18c0d7jgkw6tdKTlNaM7wyopbLRBiit8oAxoP89YnuBOzCZ8g8aBCaCqq7h208qUTroL7Whgzam7UY3HVLow==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.11
       '@types/semver': 7.3.12
-      '@typescript-eslint/scope-manager': 5.51.0
-      '@typescript-eslint/types': 5.51.0
-      '@typescript-eslint/typescript-estree': 5.51.0_typescript@4.8.4
-      eslint: 8.33.0
+      '@typescript-eslint/scope-manager': 5.48.2
+      '@typescript-eslint/types': 5.48.2
+      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.8.4
+      eslint: 8.32.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.33.0
+      eslint-utils: 3.0.0_eslint@8.32.0
       semver: 7.3.8
     transitivePeerDependencies:
       - supports-color
@@ -3394,11 +3409,11 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.51.0:
-    resolution: {integrity: sha512-Oh2+eTdjHjOFjKA27sxESlA87YPSOJafGCR0md5oeMdh1ZcCfAGCIOL216uTBAkAIptvLIfKQhl7lHxMJet4GQ==}
+  /@typescript-eslint/visitor-keys/5.48.2:
+    resolution: {integrity: sha512-z9njZLSkwmjFWUelGEwEbdf4NwKvfHxvGC0OcGN1Hp/XNDIcJ7D5DpPNPv6x6/mFvc1tQHsaWmpD/a4gOvvCJQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.51.0
+      '@typescript-eslint/types': 5.48.2
       eslint-visitor-keys: 3.3.0
     dev: true
 
@@ -3786,7 +3801,7 @@ packages:
   /acorn-globals/7.0.1:
     resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
     dependencies:
-      acorn: 8.8.1
+      acorn: 8.8.0
       acorn-walk: 8.2.0
     dev: true
 
@@ -4744,7 +4759,7 @@ packages:
     dev: true
 
   /concat-map/0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
     dev: true
 
   /concurrently/7.5.0:
@@ -6305,21 +6320,21 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /eslint-config-prettier/8.6.0_eslint@8.33.0:
+  /eslint-config-prettier/8.6.0_eslint@8.32.0:
     resolution: {integrity: sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: 8.33.0
+      eslint: 8.32.0
     dev: true
 
-  /eslint-plugin-cypress/2.12.1_eslint@8.33.0:
+  /eslint-plugin-cypress/2.12.1_eslint@8.32.0:
     resolution: {integrity: sha512-c2W/uPADl5kospNDihgiLc7n87t5XhUbFDoTl6CfVkmG+kDAb5Ux10V9PoLPu9N+r7znpc+iQlcmAqT1A/89HA==}
     peerDependencies:
       eslint: '>= 3.2.1'
     dependencies:
-      eslint: 8.33.0
+      eslint: 8.32.0
       globals: 11.12.0
     dev: true
 
@@ -6329,7 +6344,7 @@ packages:
       htmlparser2: 8.0.1
     dev: true
 
-  /eslint-plugin-jest/27.1.5_5egy7e47lxq7vf4ol2lvjduk2u:
+  /eslint-plugin-jest/27.1.5_5rcd23qw3h5vuffwo2owxb3hw4:
     resolution: {integrity: sha512-CK2dekZ5VBdzsOSOH5Fc1rwC+cWXjkcyrmf1RV714nDUDKu+o73TTJiDxpbILG8PtPPpAAl3ywzh5QA7Ft0mjA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -6342,16 +6357,16 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.51.0_ea5vny3vf4guc7b4slvddguozq
-      '@typescript-eslint/utils': 5.42.1_o2s6jvgtr2hafiobaqfgu6k2l4
-      eslint: 8.33.0
+      '@typescript-eslint/eslint-plugin': 5.48.2_iljmjqxcygjq3saipl7gerxpvi
+      '@typescript-eslint/utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      eslint: 8.32.0
       jest: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /eslint-plugin-jsdoc/39.6.2_eslint@8.33.0:
+  /eslint-plugin-jsdoc/39.6.2_eslint@8.32.0:
     resolution: {integrity: sha512-dvgY/W7eUFoAIIiaWHERIMI61ZWqcz9YFjEeyTzdPlrZc3TY/3aZm5aB91NUoTLWYZmO/vFlYSuQi15tF7uE5A==}
     engines: {node: ^14 || ^16 || ^17 || ^18 || ^19}
     peerDependencies:
@@ -6361,7 +6376,7 @@ packages:
       comment-parser: 1.3.1
       debug: 4.3.4
       escape-string-regexp: 4.0.0
-      eslint: 8.33.0
+      eslint: 8.32.0
       esquery: 1.4.0
       semver: 7.3.8
       spdx-expression-parse: 3.0.1
@@ -6377,23 +6392,23 @@ packages:
       vscode-json-languageservice: 4.2.1
     dev: true
 
-  /eslint-plugin-lodash/7.4.0_eslint@8.33.0:
+  /eslint-plugin-lodash/7.4.0_eslint@8.32.0:
     resolution: {integrity: sha512-Tl83UwVXqe1OVeBRKUeWcfg6/pCW1GTRObbdnbEJgYwjxp5Q92MEWQaH9+dmzbRt6kvYU1Mp893E79nJiCSM8A==}
     engines: {node: '>=10'}
     peerDependencies:
       eslint: '>=2'
     dependencies:
-      eslint: 8.33.0
+      eslint: 8.32.0
       lodash: 4.17.21
     dev: true
 
-  /eslint-plugin-markdown/3.0.0_eslint@8.33.0:
+  /eslint-plugin-markdown/3.0.0_eslint@8.32.0:
     resolution: {integrity: sha512-hRs5RUJGbeHDLfS7ELanT0e29Ocyssf/7kBM+p7KluY5AwngGkDf8Oyu4658/NZSGTTq05FZeWbkxXtbVyHPwg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.33.0
+      eslint: 8.32.0
       mdast-util-from-markdown: 0.8.5
     transitivePeerDependencies:
       - supports-color
@@ -6411,7 +6426,7 @@ packages:
       '@microsoft/tsdoc-config': 0.16.2
     dev: true
 
-  /eslint-plugin-unicorn/45.0.0_eslint@8.33.0:
+  /eslint-plugin-unicorn/45.0.0_eslint@8.32.0:
     resolution: {integrity: sha512-iP8cMRxXKHonKioOhnCoCcqVhoqhAp6rB+nsoLjXFDxTHz3btWMAp8xwzjHA0B1K6YV/U/Yvqn1bUXZt8sJPuQ==}
     engines: {node: '>=14.18'}
     peerDependencies:
@@ -6420,8 +6435,8 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       ci-info: 3.6.2
       clean-regexp: 1.0.0
-      eslint: 8.33.0
-      eslint-utils: 3.0.0_eslint@8.33.0
+      eslint: 8.32.0
+      eslint-utils: 3.0.0_eslint@8.32.0
       esquery: 1.4.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.0
@@ -6452,13 +6467,13 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@8.33.0:
+  /eslint-utils/3.0.0_eslint@8.32.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 8.33.0
+      eslint: 8.32.0
       eslint-visitor-keys: 2.1.0
     dev: true
 
@@ -6472,8 +6487,8 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint/8.33.0:
-    resolution: {integrity: sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==}
+  /eslint/8.32.0:
+    resolution: {integrity: sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -6488,7 +6503,7 @@ packages:
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.33.0
+      eslint-utils: 3.0.0_eslint@8.32.0
       eslint-visitor-keys: 3.3.0
       espree: 9.4.0
       esquery: 1.4.0
@@ -6497,7 +6512,7 @@ packages:
       file-entry-cache: 6.0.1
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.20.0
+      globals: 13.19.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.0
       import-fresh: 3.3.0
@@ -7196,8 +7211,8 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /globals/13.20.0:
-    resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
+  /globals/13.19.0:
+    resolution: {integrity: sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==}
     engines: {node: '>=8'}
     dependencies:
       type-fest: 0.20.2
@@ -8893,11 +8908,9 @@ packages:
       - supports-color
     dev: true
 
-  /mdast-util-frontmatter/1.0.1:
-    resolution: {integrity: sha512-JjA2OjxRqAa8wEG8hloD0uTU0kdn8kbtOWpPP94NBkfAlbxn4S8gCGf/9DwFtEeGPXrDcNXdiDjVaRdUFqYokw==}
+  /mdast-util-frontmatter/1.0.0:
+    resolution: {integrity: sha512-7itKvp0arEVNpCktOET/eLFAYaZ+0cNjVtFtIPxgQ5tV+3i+D4SDDTjTzPWl44LT59PC+xdx+glNTawBdF98Mw==}
     dependencies:
-      '@types/mdast': 3.0.10
-      mdast-util-to-markdown: 1.3.0
       micromark-extension-frontmatter: 1.0.0
     dev: true
 
@@ -10310,7 +10323,7 @@ packages:
     resolution: {integrity: sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==}
     dependencies:
       '@types/mdast': 3.0.10
-      mdast-util-frontmatter: 1.0.1
+      mdast-util-frontmatter: 1.0.0
       micromark-extension-frontmatter: 1.0.0
       unified: 10.1.2
     dev: true
@@ -11219,7 +11232,7 @@ packages:
     hasBin: true
     dependencies:
       '@jridgewell/source-map': 0.3.2
-      acorn: 8.8.1
+      acorn: 8.8.0
       commander: 2.20.3
       source-map-support: 0.5.21
     dev: true