diff --git a/packages/mermaid/src/diagrams/gantt/ganttDetector.ts b/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
index 5de167010..3fe2bbe7e 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
@@ -1,5 +1,20 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
 
-export const ganttDetector: DiagramDetector = (txt) => {
+const id = 'gantt';
+
+const detector: DiagramDetector = (txt) => {
   return txt.match(/^\s*gantt/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./ganttDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
new file mode 100644
index 000000000..b1341052d
--- /dev/null
+++ b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
@@ -0,0 +1,13 @@
+// @ts-ignore: TODO Fix ts errors
+import ganttParser from './parser/gantt';
+import ganttDb from './ganttDb';
+import ganttRenderer from './ganttRenderer';
+import ganttStyles from './styles';
+import { DiagramDefinition } from '../../diagram-api/types';
+
+export const diagram: DiagramDefinition = {
+  parser: ganttParser,
+  db: ganttDb,
+  renderer: ganttRenderer,
+  styles: ganttStyles,
+};