simple-mermaid-parser
v2.0.1
Published
Simple parser for Mermaid Diagrams that you can use in the backend.
Downloads
6
Maintainers
Readme
Mermaid Parser
Mermaid Parser is a parser for mermaid diagrams to help us retrieve information about mermaid diagrams we can then use in our projects.
Parsing a mermaid diagram returns the following information:
ParsedDiagram = {
title: string; // Title
accTitle: string;
edges: Edge[]; // The connections between nodes
vertices: { // Map of Nodes with the Node Id as key
[key: string]: Vertix
};
tooltip: string;
direction: string; // Direction of the diagram
classes: string[];
subGraphs: SubGraph[]; // Information about the subgraphs, like what nodes are in side each one.
};
How to use it
First add simple-mermaid-parser
to the project.
npm i simple-mermaid-parser
Then import it where you need:
import { parse, toSvg, toPng } from "simple-mermaid-parser";
So you can use it to parse mermaid diagrams:
const diagram = `
graph LR
A["The A"] --> B["The B"] --> C["The C"]
E["The E"] --> C
F["The F"] --> B
`;
const diagramInfo = await parse(diagram);
console.log(diagramInfo.edges);
/*
Output:
[
{
start: 'A',
end: 'B',
type: 'arrow_point',
text: '',
labelType: 'text',
stroke: 'normal',
length: 1
},
{
start: 'B',
end: 'C',
type: 'arrow_point',
text: '',
labelType: 'text',
stroke: 'normal',
length: 1
},
{
start: 'E',
end: 'C',
type: 'arrow_point',
text: '',
labelType: 'text',
stroke: 'normal',
length: 1
},
{
start: 'F',
end: 'B',
type: 'arrow_point',
text: '',
labelType: 'text',
stroke: 'normal',
length: 1
}
]
*/
Or you can use it to create an SVG image of the diagram:
const diagram = `
graph LR
A["The A"] --> B["The B"] --> C["The C"]
E["The E"] --> C
F["The F"] --> B
`;
const svgText = await toSvg(diagram);
/*
Outputs:
<svg>...</svg>
*/
await toSvg(diagram, "diagram.svg");
/*
Creates diagram.svg
*/
And also a PNG file of the diagram:
const diagram = `
graph LR
A["The A"] --> B["The B"] --> C["The C"]
E["The E"] --> C
F["The F"] --> B
`;
await toPng(diagram, "diagram.png");
/*
Creates diagram.png with the image for this diagram
*/