Minor cleanup

Co-authored-by: Per Brolin <per@mermaidchart.com>
This commit is contained in:
Sidharth Vinod
2023-02-20 17:53:07 +05:30
parent 38b2cbc3d1
commit 68cdc759a7
4 changed files with 43 additions and 55 deletions

View File

@@ -8,41 +8,6 @@
[mermaidAPI](../modules/mermaidAPI.md).RenderResult [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 ## Properties
### bindFunctions ### bindFunctions
@@ -53,6 +18,15 @@ element will be removed when rendering is completed.
▸ (`element`): `void` ▸ (`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 ##### Parameters
| Name | Type | | Name | Type |
@@ -65,7 +39,7 @@ element will be removed when rendering is completed.
#### Defined in #### 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` **svg**: `string`
The svg code for the rendered graph.
#### Defined in #### 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)

View File

@@ -95,7 +95,7 @@ mermaid.initialize(config);
#### Defined in #### 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 ## Functions
@@ -126,7 +126,7 @@ Return the last node appended
#### Defined in #### 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 #### 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 #### 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 #### 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 #### 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 #### 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 #### 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 #### 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 #### 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)

View File

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

View File

@@ -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. // @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 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. * Parse the text and validate the syntax.
* @param text - The mermaid diagram definition. * @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. * @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 ( const render = async function (
id: string, id: string,
text: string, text: string,