diagram-codes-engine-client v1.0.14
Diagram Codes Engine Client Integration Library
This repository contains the client library for embedding the Diagram Codes Engine into a Web Application.
An active integration subscription is required for using this library in production.
Install
yarn add diagram-codes-engine-client
Usage
Import the module:
import diagramEngine from 'diagram-codes-engine-client'
Then, set the path to the engine. This is provided to you when registering for an integration subscription.
For test purposes you can use this path: https://web-engine-demo-dev.diagram.codes/apirender/
With an active integration subscription you will receive a custom URL for the render-engine (or the web assets to deploy it on any hosting).
//Use your unique engine url.
diagramEngine.setEnginePath('https://web-engine-demo-dev.diagram.codes/apirender/')
let diagramParams = {
container:'#container',
type:'mind-map',
code:`
"My Map"->b,c,d,e,random
random->${Math.random()*1000}
`
}
DiagramEngine.renderDiagram(diagramParams)
The previous code will initialize the container and will render the provided diagram (in this case a mind map).
Setting themes
Appearance can be modified to better fit with the host application styles.
let diagramParams = {
container:'#container',
type:'mind-map',
code:'a->b,c,d,e',
theme: {
document: {
backgroundColor: "#fff",
shadowColor: "black",
shadow: false,
},
nodes: {
fontFamily: "Arial",
fontSize: "16",
textColor:'black',
fillColor: "white",
borderWidth: "2",
borderColor: "black",
borderRadius: 3,
padding: 8,
},
labels: {
fontFamily: "Arial",
fontSize: "14",
textColor:'black',
fillColor: "white",
borderWidth: "0",
borderColor: "none",
borderRadius: 0,
padding: 4,
},
connectors: {
color: "black",
width: "2",
}
}
}
Events
Capture errors
Add a global error handler:
DiagramEngine.setErrorHandler((errorData)=>{
console.log(errorData.message);
console.log(errorData.line);
})