test: add tests for gitGraph config directives

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
chore: add changeset
2025-12-10 22:44:11 +01:00 · 2025-12-08 12:58:47 +05:30 · 2025-12-04 19:45:18 +05:30 · 2025-12-04 17:17:35 +05:30 · 2025-12-04 13:42:51 +05:30 · 2025-12-04 04:17:52 +00:00
11 changed files with 906 additions and 585 deletions
--- a/.changeset/wise-ends-bake.md
+++ b/.changeset/wise-ends-bake.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(gitgraph): pass gitGraphConfig to renderer functions for applying directives properly.
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -1569,4 +1569,514 @@ gitGraph TB:
      {}
    );
  });
+
+  describe('showBranches and showCommitLabel directives', () => {
+    it('77: should show branch lines when showBranches is true (default)', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: true
+              showCommitLabel: true
+              rotateCommitLabel: false
+              parallelCommits: false
+          ---
+          gitGraph
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            checkout develop
+            commit id: "3"
+            commit id: "4"
+            checkout main
+            commit id: "5"
+            commit id: "6"
+        `,
+        {}
+      );
+    });
+
+    it('78: should hide branch lines when showBranches is false', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: false
+              showCommitLabel: true
+              rotateCommitLabel: false
+              parallelCommits: false
+          ---
+          gitGraph
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            checkout develop
+            commit id: "3"
+            commit id: "4"
+            checkout main
+            commit id: "5"
+            commit id: "6"
+        `,
+        {}
+      );
+    });
+
+    it('79: should show commit labels when showCommitLabel is true (default)', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: true
+              showCommitLabel: true
+              rotateCommitLabel: false
+              parallelCommits: false
+          ---
+          gitGraph
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            checkout develop
+            commit id: "3"
+            commit id: "4"
+            checkout main
+            commit id: "5"
+            commit id: "6"
+        `,
+        {}
+      );
+    });
+
+    it('80: should hide commit labels when showCommitLabel is false', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: true
+              showCommitLabel: false
+              rotateCommitLabel: false
+              parallelCommits: false
+          ---
+          gitGraph
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            checkout develop
+            commit id: "3"
+            commit id: "4"
+            checkout main
+            commit id: "5"
+            commit id: "6"
+        `,
+        {}
+      );
+    });
+
+    it('81: should show both branches and commit labels when both directives are true (default)', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: true
+              showCommitLabel: true
+              rotateCommitLabel: false
+              parallelCommits: false
+         ---
+          gitGraph
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            checkout develop
+            commit id: "3"
+            commit id: "4"
+            checkout main
+            commit id: "5"
+            commit id: "6"
+        `,
+        {}
+      );
+    });
+
+    it('82: should hide both branches and commit labels when both directives are false', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: false
+              showCommitLabel: false
+              rotateCommitLabel: false
+              parallelCommits: false
+          ---
+          gitGraph
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            checkout develop
+            commit id: "3"
+            commit id: "4"
+            checkout main
+            commit id: "5"
+            commit id: "6"
+        `,
+        {}
+      );
+    });
+
+    it('83: should show branch lines with merge commits when showBranches is true', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: true
+              showCommitLabel: true
+              rotateCommitLabel: false
+              parallelCommits: false
+          ---
+          gitGraph
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            checkout develop
+            commit id: "3"
+            commit id: "4"
+            checkout main
+            merge develop
+            commit id: "5"
+            commit id: "6"
+        `,
+        {}
+      );
+    });
+
+    it('84: should hide branch lines with merge commits when showBranches is false', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: false
+              showCommitLabel: true
+              rotateCommitLabel: false
+              parallelCommits: false
+          ---
+          gitGraph
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            checkout develop
+            commit id: "3"
+            commit id: "4"
+            checkout main
+            merge develop
+            commit id: "5"
+            commit id: "6"
+        `,
+        {}
+      );
+    });
+
+    it('85: should show commit labels with tags when showCommitLabel is true', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: true
+              showCommitLabel: true
+              rotateCommitLabel: false
+              parallelCommits: false
+          ---
+          gitGraph
+            commit id: "1" tag: "v1.0"
+            commit id: "2"
+            branch develop
+            checkout develop
+            commit id: "3" tag: "v1.1"
+            commit id: "4"
+            checkout main
+            merge develop tag: "v2.0"
+            commit id: "5"
+        `,
+        {}
+      );
+    });
+
+    it('86: should hide commit labels with tags when showCommitLabel is false', () => {
+      imgSnapshotTest(
+        `---
+        config:
+          gitGraph:
+            showBranches: true
+            showCommitLabel: false
+            rotateCommitLabel: false
+            parallelCommits: false
+        ---
+        gitGraph
+          commit id: "1" tag: "v1.0"
+          commit id: "2"
+          branch develop
+          checkout develop
+          commit id: "3" tag: "v1.1"
+          commit id: "4"
+          checkout main
+          merge develop tag: "v2.0"
+          commit id: "5"
+        `,
+        {}
+      );
+    });
+
+    it('87: should show branches with TB orientation when showBranches is true', () => {
+      imgSnapshotTest(
+        `---
+        config:
+          gitGraph:
+            showBranches: true
+            showCommitLabel: true
+            rotateCommitLabel: false
+            parallelCommits: false
+        ---
+        gitGraph TB:
+          commit id: "1"
+          commit id: "2"
+          branch develop
+          checkout develop
+          commit id: "3"
+          commit id: "4"
+          checkout main
+          commit id: "5"
+        `,
+        {}
+      );
+    });
+
+    it('88: should hide branches with TB orientation when showBranches is false', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: false
+              showCommitLabel: true
+              rotateCommitLabel: false
+              parallelCommits: false
+          ---
+          gitGraph TB:
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            checkout develop
+            commit id: "3"
+            commit id: "4"
+            checkout main
+            commit id: "5"
+        `,
+        {}
+      );
+    });
+
+    it('89: should show commit labels with BT orientation when showCommitLabel is true', () => {
+      imgSnapshotTest(
+        `---
+        config:
+          gitGraph:
+            showBranches: true
+            showCommitLabel: true
+            rotateCommitLabel: false
+            parallelCommits: false
+        ---
+        gitGraph BT:
+          commit id: "1"
+          commit id: "2"
+          branch develop
+          checkout develop
+          commit id: "3"
+          commit id: "4"
+          checkout main
+          commit id: "5"
+        `,
+        {}
+      );
+    });
+
+    it('90: should hide commit labels with BT orientation when showCommitLabel is false', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: true
+              showCommitLabel: false
+              rotateCommitLabel: false
+              parallelCommits: false
+          ---
+          gitGraph BT:
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            checkout develop
+            commit id: "3"
+            commit id: "4"
+            checkout main
+            commit id: "5"
+        `,
+        {}
+      );
+    });
+
+    it('91: should render with rotateCommitLabel set to true', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: true
+              showCommitLabel: true
+              rotateCommitLabel: true
+              parallelCommits: false
+          ---
+          gitGraph
+            commit id: "Alpha"
+            commit id: "Beta"
+            branch develop
+            checkout develop
+            commit id: "Gamma"
+            commit id: "Delta"
+            checkout main
+            commit id: "Epsilon"
+        `,
+        {}
+      );
+    });
+
+    it('92: should render with rotateCommitLabel set to false', () => {
+      imgSnapshotTest(
+        `---
+        config:
+          gitGraph:
+            showBranches: true
+            showCommitLabel: true
+            rotateCommitLabel: false
+            parallelCommits: false
+        ---
+        gitGraph
+          commit id: "Alpha"
+          commit id: "Beta"
+          branch develop
+          checkout develop
+          commit id: "Gamma"
+          commit id: "Delta"
+          checkout main
+          commit id: "Epsilon"
+        `,
+        {}
+      );
+    });
+
+    it('93: should render with parallelCommits set to true', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: true
+              showCommitLabel: true
+              rotateCommitLabel: false
+              parallelCommits: true
+          ---
+          gitGraph
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            branch feature
+            checkout develop
+            commit id: "3"
+            checkout feature
+            commit id: "4"
+            checkout main
+            commit id: "5"
+            checkout develop
+            commit id: "6"
+            checkout feature
+            commit id: "7"
+        `,
+        {}
+      );
+    });
+
+    it('94: should render with parallelCommits set to false', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: true
+              showCommitLabel: true
+              rotateCommitLabel: false
+              parallelCommits: false
+          ---
+          gitGraph
+            commit id: "1"
+            commit id: "2"
+            branch develop
+            branch feature
+            checkout develop
+            commit id: "3"
+            checkout feature
+            commit id: "4"
+            checkout main
+            commit id: "5"
+            checkout develop
+            commit id: "6"
+            checkout feature
+            commit id: "7"
+        `,
+        {}
+      );
+    });
+
+    it('95: should render with custom mainBranchName', () => {
+      imgSnapshotTest(
+        `---
+        config:
+          gitGraph:
+            showBranches: true
+            showCommitLabel: true
+            rotateCommitLabel: false
+            parallelCommits: false
+            mainBranchName: 'trunk'
+        ---
+        gitGraph
+          commit id: "1"
+          commit id: "2"
+          branch develop
+          checkout develop
+          commit id: "3"
+          commit id: "4"
+          checkout trunk
+          commit id: "5"
+          commit id: "6"
+        `,
+        {}
+      );
+    });
+
+    it('96: should render with custom mainBranchOrder', () => {
+      imgSnapshotTest(
+        `---
+          config:
+            gitGraph:
+              showBranches: true
+              showCommitLabel: true
+              rotateCommitLabel: false
+              parallelCommits: false
+              mainBranchOrder: 2
+          ---
+          gitGraph
+            commit id: "1"
+            branch feature1
+            branch feature2
+            checkout feature1
+            commit id: "2"
+            checkout feature2
+            commit id: "3"
+            checkout main
+            commit id: "4"
+        `,
+        {}
+      );
+    });
+  });
 });
--- a/cypress/timings.json
+++ b/cypress/timings.json
@@ -2,35 +2,35 @@
  "durations": [
    {
      "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 6099
+      "duration": 5944
    },
    {
      "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 2236
+      "duration": 2180
    },
    {
      "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3405
+      "duration": 3282
    },
    {
      "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 2176
+      "duration": 2137
    },
    {
      "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 12300
+      "duration": 11926
    },
    {
      "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 2089
+      "duration": 2021
    },
    {
      "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 32033
+      "duration": 31377
    },
    {
      "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3672
+      "duration": 3442
    },
    {
      "spec": "cypress/integration/rendering/architecture.spec.ts",
@@ -38,191 +38,191 @@
    },
    {
      "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 18135
+      "duration": 18390
    },
    {
      "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5661
+      "duration": 6468
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 41456
+      "duration": 41282
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 38910
+      "duration": 39226
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 24120
+      "duration": 25028
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 38454
+      "duration": 38458
    },
    {
      "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 17099
+      "duration": 17305
    },
    {
      "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9844
+      "duration": 9762
    },
    {
      "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2951
+      "duration": 2923
    },
    {
      "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 90081
+      "duration": 89135
    },
    {
      "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 19496
+      "duration": 18976
    },
    {
      "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3829
+      "duration": 3643
    },
    {
      "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 42517
+      "duration": 43103
    },
    {
      "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 31541
+      "duration": 31637
    },
    {
      "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7749
+      "duration": 7630
    },
    {
      "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 25230
+      "duration": 25642
    },
    {
      "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 49359
+      "duration": 50365
    },
    {
      "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 33028
+      "duration": 32790
    },
    {
      "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 22271
+      "duration": 23065
    },
    {
      "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 51837
+      "duration": 52238
    },
    {
      "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 285060
+      "duration": 289380
    },
    {
      "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 59517
+      "duration": 59265
    },
    {
      "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3501
+      "duration": 3269
    },
    {
      "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 7405
+      "duration": 7470
    },
    {
      "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7975
+      "duration": 7980
    },
    {
      "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 4312
+      "duration": 3896
    },
    {
      "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2630
+      "duration": 2640
    },
    {
      "spec": "cypress/integration/rendering/mindmap-tidy-tree.spec.js",
-      "duration": 4541
+      "duration": 4327
    },
    {
      "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 12134
+      "duration": 12588
    },
    {
      "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 151160
+      "duration": 153490
    },
    {
      "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 118044
+      "duration": 117833
    },
    {
      "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 5166
+      "duration": 4975
    },
    {
      "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 7074
+      "duration": 6682
    },
    {
      "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 9518
+      "duration": 8972
    },
    {
      "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5846
+      "duration": 5631
    },
    {
      "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 3089
+      "duration": 2776
    },
    {
      "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 55361
+      "duration": 54373
    },
    {
      "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 7236
+      "duration": 7203
    },
    {
      "spec": "cypress/integration/rendering/sequencediagram-v2.spec.js",
-      "duration": 26057
+      "duration": 31707
    },
    {
      "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 48401
+      "duration": 48327
    },
    {
      "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 30364
+      "duration": 30728
    },
    {
      "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 16862
+      "duration": 16881
    },
    {
      "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 30553
+      "duration": 30715
    },
    {
      "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8962
+      "duration": 8586
    },
    {
      "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 12486
+      "duration": 15184
    },
    {
      "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 21718
+      "duration": 21282
    },
    {
      "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3882
+      "duration": 3576
    }
  ]
 }
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -59,6 +59,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
 - [GNU Octave](https://octave.org/) ✅
  - [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
+- [HackMD](https://hackmd.io/c/tutorials/%2F%40docs%2Fflowchart-en#Create-more-complex-flowcharts) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
--- a/package.json
+++ b/package.json
@@ -65,14 +65,14 @@
  "devDependencies": {
    "@applitools/eyes-cypress": "^3.56.5",
    "@argos-ci/cypress": "^6.2.2",
-    "@changesets/changelog-github": "^0.5.1",
-    "@changesets/cli": "^2.29.7",
-    "@cspell/eslint-plugin": "^9.3.0",
+    "@changesets/changelog-github": "^0.5.2",
+    "@changesets/cli": "^2.29.8",
+    "@cspell/eslint-plugin": "^9.3.2",
    "@cypress/code-coverage": "^3.14.7",
    "@eslint/js": "^9.26.0",
    "@rollup/plugin-typescript": "^12.1.4",
    "@types/cors": "^2.8.19",
-    "@types/express": "^5.0.5",
+    "@types/express": "^5.0.6",
    "@types/js-yaml": "^4.0.9",
    "@types/jsdom": "^21.1.7",
    "@types/lodash": "^4.17.21",
@@ -105,7 +105,7 @@
    "eslint-plugin-no-only-tests": "^3.3.0",
    "eslint-plugin-tsdoc": "^0.4.0",
    "eslint-plugin-unicorn": "^62.0.0",
-    "express": "^5.1.0",
+    "express": "^5.2.1",
    "globals": "^16.4.0",
    "globby": "^14.1.0",
    "husky": "^9.1.7",
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -123,7 +123,7 @@
    "rimraf": "^6.0.1",
    "start-server-and-test": "^2.1.3",
    "type-fest": "^4.41.0",
-    "typedoc": "^0.28.14",
+    "typedoc": "^0.28.15",
    "typedoc-plugin-markdown": "^4.8.1",
    "typescript": "~5.7.3",
    "unist-util-flatmap": "^1.0.0",
--- a/packages/mermaid/src/diagrams/git/gitGraph.spec.ts
+++ b/packages/mermaid/src/diagrams/git/gitGraph.spec.ts
@@ -1357,4 +1357,35 @@ describe('when parsing a gitGraph', function () {

    logWarnSpy.mockRestore();
  });
+
+  describe('gitGraph config directives', () => {
+    it('should expose getConfig method', () => {
+      expect(db.getConfig).toBeDefined();
+      expect(typeof db.getConfig).toBe('function');
+    });
+
+    it('should return config with showBranches property', () => {
+      const config = db.getConfig();
+      expect(config).toBeDefined();
+      expect(config).toHaveProperty('showBranches');
+    });
+
+    it('should return config with showCommitLabel property', () => {
+      const config = db.getConfig();
+      expect(config).toBeDefined();
+      expect(config).toHaveProperty('showCommitLabel');
+    });
+
+    it('should return config with rotateCommitLabel property', () => {
+      const config = db.getConfig();
+      expect(config).toBeDefined();
+      expect(config).toHaveProperty('rotateCommitLabel');
+    });
+
+    it('should return config with parallelCommits property', () => {
+      const config = db.getConfig();
+      expect(config).toBeDefined();
+      expect(config).toHaveProperty('parallelCommits');
+    });
+  });
 });
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts
@@ -1,11 +1,12 @@
 import { select } from 'd3';
-import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI.js';
+import { setupGraphViewbox } from '../../diagram-api/diagramAPI.js';
 import { log } from '../../logger.js';
 import utils from '../../utils.js';
 import type { DrawDefinition } from '../../diagram-api/types.js';
 import type d3 from 'd3';
 import type { Commit, GitGraphDBRenderProvider, DiagramOrientation } from './gitGraphTypes.js';
 import { commitType } from './gitGraphTypes.js';
+import type { GitGraphDiagramConfig } from '../../config.type.js';

 interface BranchPosition {
  pos: number;
@@ -21,8 +22,6 @@ interface CommitPositionOffset extends CommitPosition {
  posWithOffset: number;
 }

-const DEFAULT_CONFIG = getConfig();
-const DEFAULT_GITGRAPH_CONFIG = DEFAULT_CONFIG?.gitGraph;
 const LAYOUT_OFFSET = 10;
 const COMMIT_STEP = 40;
 const PX = 4;
@@ -287,12 +286,13 @@ const drawCommitLabel = (
  gLabels: d3.Selection<SVGGElement, unknown, HTMLElement, any>,
  commit: Commit,
  commitPosition: CommitPositionOffset,
-  pos: number
+  pos: number,
+  gitGraphConfig: GitGraphDiagramConfig
 ) => {
  if (
    commit.type !== commitType.CHERRY_PICK &&
    ((commit.customId && commit.type === commitType.MERGE) || commit.type !== commitType.MERGE) &&
-    DEFAULT_GITGRAPH_CONFIG?.showCommitLabel
+    gitGraphConfig.showCommitLabel
  ) {
    const wrapper = gLabels.append('g');
    const labelBkg = wrapper.insert('rect').attr('class', 'commit-label-bkg');
@@ -322,7 +322,7 @@ const drawCommitLabel = (
        text.attr('x', commitPosition.posWithOffset - bbox.width / 2);
      }

-      if (DEFAULT_GITGRAPH_CONFIG.rotateCommitLabel) {
+      if (gitGraphConfig.rotateCommitLabel) {
        if (dir === 'TB' || dir === 'BT') {
          text.attr(
            'transform',
@@ -514,16 +514,14 @@ const getCommitPosition = (
 const drawCommits = (
  svg: d3.Selection<d3.BaseType, unknown, HTMLElement, any>,
  commits: Map<string, Commit>,
-  modifyGraph: boolean
+  modifyGraph: boolean,
+  gitGraphConfig: GitGraphDiagramConfig
 ) => {
-  if (!DEFAULT_GITGRAPH_CONFIG) {
-    throw new Error('GitGraph config not found');
-  }
  const gBullets = svg.append('g').attr('class', 'commit-bullets');
  const gLabels = svg.append('g').attr('class', 'commit-labels');
  let pos = dir === 'TB' || dir === 'BT' ? defaultPos : 0;
  const keys = [...commits.keys()];
-  const isParallelCommits = DEFAULT_GITGRAPH_CONFIG?.parallelCommits ?? false;
+  const isParallelCommits = gitGraphConfig.parallelCommits ?? false;

  const sortKeys = (a: string, b: string) => {
    const seqA = commits.get(a)?.seq;
@@ -555,7 +553,7 @@ const drawCommits = (
      const commitSymbolType = commit.customType ?? commit.type;
      const branchIndex = branchPos.get(commit.branch)?.index ?? 0;
      drawCommitBullet(gBullets, commit, commitPosition, typeClass, branchIndex, commitSymbolType);
-      drawCommitLabel(gLabels, commit, commitPosition, pos);
+      drawCommitLabel(gLabels, commit, commitPosition, pos, gitGraphConfig);
      drawCommitTags(gLabels, commit, commitPosition, pos);
    }
    if (dir === 'TB' || dir === 'BT') {
@@ -812,7 +810,8 @@ const drawArrows = (

 const drawBranches = (
  svg: d3.Selection<d3.BaseType, unknown, HTMLElement, any>,
-  branches: { name: string }[]
+  branches: { name: string }[],
+  gitGraphConfig: GitGraphDiagramConfig
 ) => {
  const g = svg.append('g');
  branches.forEach((branch, index) => {
@@ -859,14 +858,14 @@ const drawBranches = (
      .attr('class', 'branchLabelBkg label' + adjustIndexForTheme)
      .attr('rx', 4)
      .attr('ry', 4)
-      .attr('x', -bbox.width - 4 - (DEFAULT_GITGRAPH_CONFIG?.rotateCommitLabel === true ? 30 : 0))
+      .attr('x', -bbox.width - 4 - (gitGraphConfig.rotateCommitLabel === true ? 30 : 0))
      .attr('y', -bbox.height / 2 + 8)
      .attr('width', bbox.width + 18)
      .attr('height', bbox.height + 4);
    label.attr(
      'transform',
      'translate(' +
-        (-bbox.width - 14 - (DEFAULT_GITGRAPH_CONFIG?.rotateCommitLabel === true ? 30 : 0)) +
+        (-bbox.width - 14 - (gitGraphConfig.rotateCommitLabel === true ? 30 : 0)) +
        ', ' +
        (pos - bbox.height / 2 - 1) +
        ')'
@@ -899,11 +898,13 @@ export const draw: DrawDefinition = function (txt, id, ver, diagObj) {
  clear();

  log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
-  if (!DEFAULT_GITGRAPH_CONFIG) {
-    throw new Error('GitGraph config not found');
-  }
-  const rotateCommitLabel = DEFAULT_GITGRAPH_CONFIG.rotateCommitLabel ?? false;
  const db = diagObj.db as GitGraphDBRenderProvider;
+  if (!db.getConfig) {
+    log.error('getConfig method is not available on db');
+    return;
+  }
+  const gitGraphConfig = db.getConfig();
+  const rotateCommitLabel = gitGraphConfig.rotateCommitLabel ?? false;
  allCommitsDict = db.getCommits();
  const branches = db.getBranchesAsObjArray();
  dir = db.getDirection();
@@ -924,27 +925,22 @@ export const draw: DrawDefinition = function (txt, id, ver, diagObj) {
    g.remove();
  });

-  drawCommits(diagram, allCommitsDict, false);
-  if (DEFAULT_GITGRAPH_CONFIG.showBranches) {
-    drawBranches(diagram, branches);
+  drawCommits(diagram, allCommitsDict, false, gitGraphConfig);
+  if (gitGraphConfig.showBranches) {
+    drawBranches(diagram, branches, gitGraphConfig);
  }
  drawArrows(diagram, allCommitsDict);
-  drawCommits(diagram, allCommitsDict, true);
+  drawCommits(diagram, allCommitsDict, true, gitGraphConfig);

  utils.insertTitle(
    diagram,
    'gitTitleText',
-    DEFAULT_GITGRAPH_CONFIG.titleTopMargin ?? 0,
+    gitGraphConfig.titleTopMargin ?? 0,
    db.getDiagramTitle()
  );

  // Setup the view box and size of the svg element
-  setupGraphViewbox(
-    undefined,
-    diagram,
-    DEFAULT_GITGRAPH_CONFIG.diagramPadding,
-    DEFAULT_GITGRAPH_CONFIG.useMaxWidth
-  );
+  setupGraphViewbox(undefined, diagram, gitGraphConfig.diagramPadding, gitGraphConfig.useMaxWidth);
 };

 export default {
@@ -1307,7 +1303,6 @@ if (import.meta.vitest) {
      branchPos.set('main', { pos: 0, index: 0 });
      branchPos.set('develop', { pos: 107.49609375, index: 1 });
      branchPos.set('feature', { pos: 225.70703125, index: 2 });
-      DEFAULT_GITGRAPH_CONFIG!.parallelCommits = true;
      commits.forEach((commit, key) => {
        if (commit.parents.length > 0) {
          curPos = calculateCommitPosition(commit);
@@ -1335,7 +1330,6 @@ if (import.meta.vitest) {
      });
    });
  });
-  DEFAULT_GITGRAPH_CONFIG!.parallelCommits = false;
  it('add', () => {
    commitPos.set('parent1', { x: 1, y: 1 });
    commitPos.set('parent2', { x: 2, y: 2 });
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -54,6 +54,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
 - [GNU Octave](https://octave.org/) ✅
  - [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
+- [HackMD](https://hackmd.io/c/tutorials/%2F%40docs%2Fflowchart-en#Create-more-complex-flowcharts) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -21,7 +21,7 @@
    "font-awesome": "^4.7.0",
    "jiti": "^2.4.2",
    "mermaid": "workspace:^",
-    "vue": "^3.5.24"
+    "vue": "^3.5.25"
  },
  "devDependencies": {
    "@iconify-json/carbon": "^1.2.14",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
omkarht	e5d3f720a0	test: add tests for gitGraph config directives on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-12-08 12:58:47 +05:30
omkarht	e0317ac764	chore: add changeset on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-12-04 19:45:18 +05:30
omkarht	bbb9c04862	7210 : fix for gitgraph showBranches and showCommitLabel directives	2025-12-04 17:17:35 +05:30
Sidharth Vinod	39d070fdea	Merge pull request #7215 from mermaid-js/update-timings Update E2E Timings	2025-12-04 13:42:51 +05:30
github-actions[bot]	4f6f627e75	chore: update E2E timings	2025-12-04 04:17:52 +00:00
Sidharth Vinod	53570ee815	Merge pull request #7204 from leandroebner/patch-1 Add HackMD integration to community integrations list	2025-12-03 09:58:48 +00:00
Shubham P	a3a5040d79	Merge pull request #7206 from mermaid-js/renovate/patch-all-patch fix(deps): update all patch dependencies (patch)	2025-12-02 08:57:58 +00:00
renovate[bot]	7ff9bf1a50	fix(deps): update all patch dependencies	2025-12-02 07:42:41 +00:00
Shubham P	ffd38716d0	Merge pull request #7208 from mermaid-js/renovate/npm-express-vulnerability chore(deps): update dependency express to v5.2.0 [security]	2025-12-02 07:28:21 +00:00
Shubham P	4313f233d2	Merge pull request #7205 from mermaid-js/renovate/patch-eslint chore(deps): update dependency @cspell/eslint-plugin to ^9.3.2	2025-12-02 07:27:24 +00:00
renovate[bot]	56564f3807	chore(deps): update dependency express to v5.2.0 [security]	2025-12-01 20:55:04 +00:00
renovate[bot]	7e1a1de5e9	chore(deps): update dependency @cspell/eslint-plugin to ^9.3.2	2025-12-01 02:27:03 +00:00
autofix-ci[bot]	b4b90417cf	[autofix.ci] apply automated fixes	2025-11-30 19:33:42 +00:00
Leandro Ebner	6bf2b2108c	Add HackMD integration to community integrations list Works natively, see hackmd docs.	2025-11-30 20:22:15 +01:00
Shubham P	614129ca31	Merge pull request #7197 from mermaid-js/fix/5496-gantt-tickinterval-app-crash 5496 : fixed UI crash from excessive tick generation with invalid dates/intervals	2025-11-27 17:09:07 +00:00