diff --git a/packages/mermaid/src/diagrams/pie/pieDetector.ts b/packages/mermaid/src/diagrams/pie/pieDetector.ts
index 65a011c7a..dd1224db9 100644
--- a/packages/mermaid/src/diagrams/pie/pieDetector.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDetector.ts
@@ -1,5 +1,20 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
 
-export const pieDetector: DiagramDetector = (txt) => {
+const id = 'pie';
+
+const detector: DiagramDetector = (txt) => {
   return txt.match(/^\s*pie/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./pieDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
diff --git a/packages/mermaid/src/diagrams/pie/pieDiagram.ts b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
new file mode 100644
index 000000000..3a586f668
--- /dev/null
+++ b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
@@ -0,0 +1,13 @@
+import { DiagramDefinition } from '../../diagram-api/types';
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/pie';
+import db from './pieDb';
+import styles from './styles';
+import renderer from './pieRenderer';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+};