mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-03 23:56:44 +02:00
@@ -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)
|
||||||
|
@@ -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)
|
||||||
|
@@ -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);
|
||||||
};
|
};
|
||||||
|
@@ -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,
|
||||||
|
Reference in New Issue
Block a user