diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md index de4f763a0..ec59f8796 100644 --- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md +++ b/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,7 +39,7 @@ 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) --- @@ -73,6 +47,8 @@ element will be removed when rendering is completed. • **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) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index aa0885707..0406baa81 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/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) diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index fc1f7e8f0..1e7539aeb 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -68,8 +68,8 @@ export class Diagram { } } -export const getDiagramFromText = async (txt: string): Promise => { - const type = detectType(txt, configApi.getConfig()); +export const getDiagramFromText = async (text: string): Promise => { + 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 => { const { id, diagram } = await loader(); registerDiagram(id, diagram); } - return new Diagram(txt); + return new Diagram(text); }; diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 999db5088..64e0bbce2 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/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,