Minor cleanup

Co-authored-by: Per Brolin <[email protected]>

Author: sidharthv96

docs/config/setup/interfaces/mermaidAPI.RenderResult.md

@@ -8,41 +8,6 @@
 
 [mermaidAPI](../modules/mermaidAPI.md).RenderResult
 
-Function that renders an svg with a graph from a chart definition. Usage example below.
-
-```javascript
-mermaidAPI.initialize({
-  startOnLoad: true,
-});
-$(function () {
-  const graphDefinition = 'graph TB\na-->b';
-  const cb = function (svgGraph) {
-    console.log(svgGraph);
-  };
-  mermaidAPI.render('id1', graphDefinition, cb);
-});
-```
-
-**`Param`**
-
-The id for the SVG element (the element to be rendered)
-
-**`Param`**
-
-The text for the graph definition
-
-**`Param`**
-
-Callback which is called after rendering is finished with the svg code as in param.
-
-**`Param`**
-
-HTML element where the svg will be inserted. (Is usually element with the .mermaid class)
-If no svgContainingElement is provided then the SVG element will be appended to the body.
-Selector to element in which a div with the graph temporarily will be
-inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
-element will be removed when rendering is completed.
-
 ## Properties
 
 ### bindFunctions
@@ -53,6 +18,15 @@ element will be removed when rendering is completed.
 
 ▸ (`element`): `void`
 
+Bind function to be called after the svg has been inserted into the DOM.
+This is necessary for adding event listeners to the elements in the svg.
+
+```js
+const { svg, bindFunctions } = mermaidAPI.render('id1', 'graph TD;A-->B');
+div.innerHTML = svg;
+bindFunctions?.(div); // To call bindFunctions only if it's present.
+```
+
 ##### Parameters
 
 | Name      | Type      |
@@ -65,14 +39,16 @@ element will be removed when rendering is completed.
 
 #### Defined in
 
-[mermaidAPI.ts:384](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L384)
+[mermaidAPI.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L91)
 
 ---
 
 ### svg
 
 • **svg**: `string`
 
+The svg code for the rendered graph.
+
 #### Defined in
 
-[mermaidAPI.ts:383](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L383)
+[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)

docs/config/setup/modules/mermaidAPI.md

@@ -95,7 +95,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:668](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L668)
+[mermaidAPI.ts:680](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L680)
 
 ## Functions
 
@@ -126,7 +126,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:291](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L291)
+[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
 
 ---
 
@@ -152,7 +152,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:242](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L242)
+[mermaidAPI.ts:259](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L259)
 
 ---
 
@@ -178,7 +178,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L171)
+[mermaidAPI.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L188)
 
 ---
 
@@ -201,7 +201,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:219](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L219)
+[mermaidAPI.ts:236](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L236)
 
 ---
 
@@ -228,7 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
+[mermaidAPI.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L172)
 
 ---
 
@@ -248,7 +248,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L135)
+[mermaidAPI.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L152)
 
 ---
 
@@ -268,7 +268,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L106)
+[mermaidAPI.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L123)
 
 ---
 
@@ -294,7 +294,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L270)
+[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
 
 ---
 
@@ -319,4 +319,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:341](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L341)
+[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)

packages/mermaid/src/Diagram.ts

@@ -68,8 +68,8 @@ export class Diagram {
   }
 }
 
-export const getDiagramFromText = async (txt: string): Promise<Diagram> => {
-  const type = detectType(txt, configApi.getConfig());
+export const getDiagramFromText = async (text: string): Promise<Diagram> => {
+  const type = detectType(text, configApi.getConfig());
   try {
     // Trying to find the diagram
     getDiagram(type);
@@ -83,5 +83,5 @@ export const getDiagramFromText = async (txt: string): Promise<Diagram> => {
     const { id, diagram } = await loader();
     registerDiagram(id, diagram);
   }
-  return new Diagram(txt);
+  return new Diagram(text);
 };

packages/mermaid/src/mermaidAPI.ts

@@ -74,6 +74,23 @@ export interface ParseOptions {
 // @ts-ignore Could replicate the type definition in d3. This also makes it possible to use the untyped info from the js diagram files.
 export type D3Element = any;
 
+export interface RenderResult {
+  /**
+   * The svg code for the rendered graph.
+   */
+  svg: string;
+  /**
+   * Bind function to be called after the svg has been inserted into the DOM.
+   * This is necessary for adding event listeners to the elements in the svg.
+   * ```js
+   * const { svg, bindFunctions } = mermaidAPI.render('id1', 'graph TD;A-->B');
+   * div.innerHTML = svg;
+   * bindFunctions?.(div); // To call bindFunctions only if it's present.
+   * ```
+   */
+  bindFunctions?: (element: Element) => void;
+}
+
 /**
  * Parse the text and validate the syntax.
  * @param text - The mermaid diagram definition.
@@ -379,11 +396,6 @@ export const removeExistingElements = (
  * @returns Returns the rendered element as a string containing the SVG definition.
  */
 
-export interface RenderResult {
-  svg: string;
-  bindFunctions?: (element: Element) => void;
-}
-
 const render = async function (
   id: string,
   text: string,