diff --git a/packages/mermaid/src/diagrams/git/gitGraphDetector.ts b/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
index f890501a5..46d09c6e5 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
+++ b/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
@@ -1,5 +1,21 @@
 import type { DiagramDetector } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types';
 
-export const gitGraphDetector: DiagramDetector = (txt) => {
+const id = 'gitGraph';
+
+const detector: DiagramDetector = (txt) => {
   return txt.match(/^\s*gitGraph/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./gitGraphDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
diff --git a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
new file mode 100644
index 000000000..9ef3506a0
--- /dev/null
+++ b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
@@ -0,0 +1,13 @@
+// @ts-ignore: TODO Fix ts errors
+import gitGraphParser from './parser/gitGraph';
+import gitGraphDb from './gitGraphAst';
+import gitGraphRenderer from './gitGraphRenderer';
+import gitGraphStyles from './styles';
+import { DiagramDefinition } from '../../diagram-api/types';
+
+export const diagram: DiagramDefinition = {
+  parser: gitGraphParser,
+  db: gitGraphDb,
+  renderer: gitGraphRenderer,
+  styles: gitGraphStyles,
+};