Add directive support to all diagrams by preprocessing

packages/mermaid/src/diagrams/c4/c4Db.js

@@ -1,4 +1,3 @@
-import mermaidAPI from '../../mermaidAPI.js';
 import * as configApi from '../../config.js';
 import { sanitizeText } from '../common/common.js';
 import { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb.js';
@@ -33,10 +32,6 @@ export const setC4Type = function (c4TypeParam) {
   c4Type = sanitizedText;
 };
 
-export const parseDirective = function (statement, context, type) {
-  mermaidAPI.parseDirective(this, statement, context, type);
-};
-
 //type, from, to, label, ?techn, ?descr, ?sprite, ?tags, $link
 export const addRel = function (type, from, to, label, techn, descr, sprite, tags, link) {
   // Don't allow label nulling
@@ -816,7 +811,6 @@ export default {
   getAccTitle,
   getAccDescription,
   setAccDescription,
-  parseDirective,
   getConfig: () => configApi.getConfig().c4,
   clear,
   LINETYPE,

packages/mermaid/src/diagrams/class/classDb.ts

@@ -5,7 +5,6 @@ import { log } from '../../logger.js';
 import * as configApi from '../../config.js';
 import common from '../common/common.js';
 import utils from '../../utils.js';
-import mermaidAPI from '../../mermaidAPI.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -37,11 +36,6 @@ let functions: any[] = [];
 
 const sanitizeText = (txt: string) => common.sanitizeText(txt, configApi.getConfig());
 
-export const parseDirective = function (statement: string, context: string, type: string) {
-  // @ts-ignore Don't wanna mess it up
-  mermaidAPI.parseDirective(this, statement, context, type);
-};
-
 const splitClassNameAndType = function (id: string) {
   let genericType = '';
   let className = id;
@@ -456,7 +450,6 @@ export const addClassesToNamespace = function (id: string, classNames: string[])
 };
 
 export default {
-  parseDirective,
   setAccTitle,
   getAccTitle,
   getAccDescription,

packages/mermaid/src/diagrams/er/erDb.js

@@ -1,5 +1,4 @@
 import { log } from '../../logger.js';
-import mermaidAPI from '../../mermaidAPI.js';
 import * as configApi from '../../config.js';
 
 import {
@@ -28,10 +27,6 @@ const Identification = {
   IDENTIFYING: 'IDENTIFYING',
 };
 
-export const parseDirective = function (statement, context, type) {
-  mermaidAPI.parseDirective(this, statement, context, type);
-};
-
 const addEntity = function (name) {
   if (entities[name] === undefined) {
     entities[name] = { attributes: [] };
@@ -85,7 +80,6 @@ const clear = function () {
 export default {
   Cardinality,
   Identification,
-  parseDirective,
   getConfig: () => configApi.getConfig().er,
   addEntity,
   addAttributes,

packages/mermaid/src/diagrams/flowchart/flowDb.js

@@ -2,7 +2,6 @@ import { select } from 'd3';
 import utils from '../../utils.js';
 import * as configApi from '../../config.js';
 import common from '../common/common.js';
-import mermaidAPI from '../../mermaidAPI.js';
 import { log } from '../../logger.js';
 import {
   setAccTitle,
@@ -34,10 +33,6 @@ let funs = [];
 
 const sanitizeText = (txt) => common.sanitizeText(txt, config);
 
-export const parseDirective = function (statement, context, type) {
-  mermaidAPI.parseDirective(this, statement, context, type);
-};
-
 /**
  * Function to lookup domId from id in the graph definition.
  *
@@ -771,7 +766,6 @@ export const lex = {
   firstGraph,
 };
 export default {
-  parseDirective,
   defaultConfig: () => configApi.defaultConfig.flowchart,
   setAccTitle,
   getAccTitle,

packages/mermaid/src/diagrams/gantt/ganttDb.js

@@ -6,7 +6,6 @@ import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js';
 import { log } from '../../logger.js';
 import * as configApi from '../../config.js';
 import utils from '../../utils.js';
-import mermaidAPI from '../../mermaidAPI.js';
 
 import {
   setAccTitle,
@@ -42,10 +41,6 @@ let weekday = 'sunday';
 // The serial order of the task in the script
 let lastOrder = 0;
 
-export const parseDirective = function (statement, context, type) {
-  mermaidAPI.parseDirective(this, statement, context, type);
-};
-
 export const clear = function () {
   sections = [];
   tasks = [];
@@ -730,7 +725,6 @@ export const bindFunctions = function (element) {
 };
 
 export default {
-  parseDirective,
   getConfig: () => configApi.getConfig().gantt,
   clear,
   setDateFormat,

packages/mermaid/src/diagrams/git/gitGraphAst.js

@@ -1,6 +1,5 @@
 import { log } from '../../logger.js';
 import { random } from '../../utils.js';
-import mermaidAPI from '../../mermaidAPI.js';
 import * as configApi from '../../config.js';
 import { getConfig } from '../../config.js';
 import common from '../common/common.js';
@@ -33,10 +32,6 @@ function getId() {
   return random({ length: 7 });
 }
 
-export const parseDirective = function (statement, context, type) {
-  mermaidAPI.parseDirective(this, statement, context, type);
-};
-
 // /**
 //  * @param currentCommit
 //  * @param otherCommit
@@ -507,7 +502,6 @@ export const commitType = {
 };
 
 export default {
-  parseDirective,
   getConfig: () => configApi.getConfig().gitGraph,
   setDirection,
   setOptions,

packages/mermaid/src/diagrams/pie/pie.spec.ts

@@ -62,17 +62,6 @@ describe('pie', () => {
       expect(sections['bat']).toBe(40);
     });
 
-    it('should handle simple pie with a directive', () => {
-      parser.parse(`%%{init: {'logLevel':0}}%%
-      pie
-      "ash" : 60
-      "bat" : 40
-      `);
-      const sections = db.getSections();
-      expect(sections['ash']).toBe(60);
-      expect(sections['bat']).toBe(40);
-    });
-
     it('should handle simple pie with a title', () => {
       parser.parse(`pie title a 60/40 pie
       "ash" : 60

packages/mermaid/src/diagrams/pie/pieDb.ts

@@ -1,5 +1,4 @@
 import { log } from '../../logger.js';
-import { parseDirective as _parseDirective } from '../../directiveUtils.js';
 import { getConfig as commonGetConfig } from '../../config.js';
 import { sanitizeText } from '../common/common.js';
 import {
@@ -11,7 +10,6 @@ import {
   setAccDescription,
   clear as commonClear,
 } from '../../commonDb.js';
-import type { ParseDirectiveDefinition } from '../../diagram-api/types.js';
 import type { PieFields, PieDB, Sections } from './pieTypes.js';
 import type { RequiredDeep } from 'type-fest';
 import type { PieDiagramConfig } from '../../config.type.js';
@@ -31,10 +29,6 @@ const config: Required<PieDiagramConfig> = structuredClone(DEFAULT_PIE_CONFIG);
 
 const getConfig = (): Required<PieDiagramConfig> => structuredClone(config);
 
-const parseDirective: ParseDirectiveDefinition = (statement, context, type) => {
-  _parseDirective(this, statement, context, type);
-};
-
 const clear = (): void => {
   sections = structuredClone(DEFAULT_PIE_DB.sections);
   showData = DEFAULT_PIE_DB.showData;
@@ -67,7 +61,6 @@ const getShowData = (): boolean => showData;
 export const db: PieDB = {
   getConfig,
 
-  parseDirective,
   clear,
   setDiagramTitle,
   getDiagramTitle,

packages/mermaid/src/diagrams/pie/pieTypes.ts

@@ -1,5 +1,5 @@
 import type { PieDiagramConfig } from '../../config.type.js';
-import type { DiagramDB, ParseDirectiveDefinition } from '../../diagram-api/types.js';
+import type { DiagramDB } from '../../diagram-api/types.js';
 
 export interface PieFields {
   sections: Sections;
@@ -46,7 +46,6 @@ export interface PieDB extends DiagramDB {
   getConfig: () => Required<PieDiagramConfig>;
 
   // common db
-  parseDirective: ParseDirectiveDefinition;
   clear: () => void;
   setDiagramTitle: (title: string) => void;
   getDiagramTitle: () => string;

packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts

@@ -19,7 +19,6 @@ const mockDB: Record<string, Mock<any, any>> = {
   setYAxisTopText: vi.fn(),
   setYAxisBottomText: vi.fn(),
   setDiagramTitle: vi.fn(),
-  parseDirective: vi.fn(),
   addPoint: vi.fn(),
 };
 
@@ -45,23 +44,6 @@ describe('Testing quadrantChart jison file', () => {
     expect(parserFnConstructor(str)).not.toThrow();
   });
 
-  it('should be able to parse directive', () => {
-    const str =
-      '%%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600} } }%%  \n quadrantChart';
-    expect(parserFnConstructor(str)).not.toThrow();
-    expect(mockDB.parseDirective.mock.calls[0]).toEqual(['%%{', 'open_directive']);
-    expect(mockDB.parseDirective.mock.calls[1]).toEqual(['init', 'type_directive']);
-    expect(mockDB.parseDirective.mock.calls[2]).toEqual([
-      '{"quadrantChart": {"chartWidth": 600, "chartHeight": 600} }',
-      'arg_directive',
-    ]);
-    expect(mockDB.parseDirective.mock.calls[3]).toEqual([
-      '}%%',
-      'close_directive',
-      'quadrantChart',
-    ]);
-  });
-
   it('should be able to parse xAxis text', () => {
     let str = 'quadrantChart\nx-axis urgent --> not urgent';
     expect(parserFnConstructor(str)).not.toThrow();
@@ -243,8 +225,7 @@ describe('Testing quadrantChart jison file', () => {
   });
 
   it('should be able to parse the whole chart', () => {
-    const str = `%%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600} } }%%
-    quadrantChart
+    const str = `quadrantChart
       title Analytics and Business Intelligence Platforms
       x-axis "Completeness of Vision ❤" --> "x-axis-2"
       y-axis Ability to Execute --> "y-axis-2"
@@ -258,17 +239,6 @@ describe('Testing quadrantChart jison file', () => {
       Incorta: [0.20, 0.30]`;
 
     expect(parserFnConstructor(str)).not.toThrow();
-    expect(mockDB.parseDirective.mock.calls[0]).toEqual(['%%{', 'open_directive']);
-    expect(mockDB.parseDirective.mock.calls[1]).toEqual(['init', 'type_directive']);
-    expect(mockDB.parseDirective.mock.calls[2]).toEqual([
-      '{"quadrantChart": {"chartWidth": 600, "chartHeight": 600} }',
-      'arg_directive',
-    ]);
-    expect(mockDB.parseDirective.mock.calls[3]).toEqual([
-      '}%%',
-      'close_directive',
-      'quadrantChart',
-    ]);
     expect(mockDB.setXAxisLeftText).toHaveBeenCalledWith({
       text: 'Completeness of Vision ❤',
       type: 'text',

packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts

@@ -1,5 +1,3 @@
-import { log } from '../../logger.js';
-import mermaidAPI from '../../mermaidAPI.js';
 import * as configApi from '../../config.js';
 import { sanitizeText } from '../common/common.js';
 import {
@@ -94,11 +92,6 @@ function getQuadrantData() {
   return quadrantBuilder.build();
 }
 
-export const parseDirective = function (statement: string, context: string, type: string) {
-  // @ts-ignore: TODO Fix ts errors
-  mermaidAPI.parseDirective(this, statement, context, type);
-};
-
 const clear = function () {
   quadrantBuilder.clear();
   commonClear();
@@ -117,7 +110,6 @@ export default {
   setYAxisBottomText,
   addPoint,
   getQuadrantData,
-  parseDirective,
   clear,
   setAccTitle,
   getAccTitle,

packages/mermaid/src/diagrams/requirement/requirementDb.js

@@ -1,6 +1,5 @@
 import * as configApi from '../../config.js';
 import { log } from '../../logger.js';
-import mermaidAPI from '../../mermaidAPI.js';
 
 import {
   setAccTitle,
@@ -48,10 +47,6 @@ const Relationships = {
   TRACES: 'traces',
 };
 
-export const parseDirective = function (statement, context, type) {
-  mermaidAPI.parseDirective(this, statement, context, type);
-};
-
 const addRequirement = (name, type) => {
   if (requirements[name] === undefined) {
     requirements[name] = {
@@ -149,7 +144,6 @@ export default {
   VerifyType,
   Relationships,
 
-  parseDirective,
   getConfig: () => configApi.getConfig().req,
 
   addRequirement,

packages/mermaid/src/diagrams/sequence/sequenceDb.js

@@ -1,4 +1,3 @@
-import mermaidAPI from '../../mermaidAPI.js';
 import * as configApi from '../../config.js';
 import { log } from '../../logger.js';
 import { sanitizeText } from '../common/common.js';
@@ -25,10 +24,6 @@ let currentBox = undefined;
 let lastCreated = undefined;
 let lastDestroyed = undefined;
 
-export const parseDirective = function (statement, context, type) {
-  mermaidAPI.parseDirective(this, statement, context, type);
-};
-
 export const addBox = function (data) {
   boxes.push({
     name: data.text,
@@ -619,7 +614,6 @@ export default {
   getBoxes,
   getDiagramTitle,
   setDiagramTitle,
-  parseDirective,
   getConfig: () => configApi.getConfig().sequence,
   clear,
   parseMessage,

packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js

@@ -2051,9 +2051,7 @@ describe('when rendering a sequenceDiagram with directives', () => {
 
   it('should handle one actor, when theme is dark and logLevel is 1 DX1 (dfg1)', async () => {
     const str = `
-%%{init: { "theme": "dark", "logLevel": 1 } }%%
 sequenceDiagram
-%%{wrap}%%
 participant Alice
 `;
     diagram = new Diagram(str);
@@ -2062,8 +2060,6 @@ participant Alice
 
     const { bounds, models } = diagram.renderer.bounds.getBounds();
     const mermaid = mermaidAPI.getConfig();
-    expect(mermaid.theme).toBe('dark');
-    expect(mermaid.logLevel).toBe(1);
     expect(bounds.startx).toBe(0);
     expect(bounds.startx).toBe(0);
     expect(bounds.starty).toBe(0);
@@ -2073,7 +2069,6 @@ participant Alice
   });
   it('should handle one actor, when logLevel is 3 (dfg0)', async () => {
     const str = `
-%%{initialize: { "logLevel": 3 }}%%
 sequenceDiagram
 participant Alice
 `;
@@ -2083,7 +2078,6 @@ participant Alice
 
     const { bounds, models } = diagram.renderer.bounds.getBounds();
     const mermaid = mermaidAPI.getConfig();
-    expect(mermaid.logLevel).toBe(3);
     expect(bounds.startx).toBe(0);
     expect(bounds.startx).toBe(0);
     expect(bounds.starty).toBe(0);