This is my code for the Mermaid Flowchart Component
import React from "react";
import mermaid from "mermaid";
mermaid.initialize({
startOnLoad: true
});
/**
* Component.
*/
class WorkflowGraph extends React.Component {
/**
* lifecycle method of component.
*/
componentDidMount() {
mermaid.contentLoaded();
}
/**
* render method.
* #return {string}
*/
render() {
return <div className="mermaid">{this.props.chart }</div>;
}
}
const WorkflowFlowchart = (props) => {
const { graphData } = props
return (
<div style={{display:"flex",justifyContent:"center"}}>
<WorkflowGraph
chart={graphData}
/>
</div>
);
}
export default WorkflowFlowchart
I am getting the graphData via api and passing it as a props. This is the graph data
API response
{
"statusCode": 0,
"graphData": "`graph TB;112((112))--BRE_RESPONSE_AWAITED-->366((366));style 112 fill:#0f0,stroke:#333,stroke-width:4px;style 112 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_SUCCESS-->355((355));style 366 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_ERROR-->356((356));style 366 fill:#f00,stroke:#333,stroke-width:4px;355((355))--MAQUETTE_FRAUD_CHECK_FAILURE-->179((179));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANKING_ACTION_DONE-->428((428));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANK_VALIDATION_PENDING-->558((558));style 355 fill:#f00,stroke:#333,stroke-width:4px;558((558))--DOCUMENT_UPLOADED-->114((114));style 558 fill:#f00,stroke:#333,stroke-width:4px;114((114))--EMANDATE_SUCCESS-->557((557));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->557((557));style 428 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_AGREEMENT_SUCCESS-->353((353));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--APPLICATION_PENDING-->555((555));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_APPLICATION_ACCEPTED-->350((350));style 557 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ACTION_PENDING-->181((181));style 353 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ALLOCATION_REJECTED-->180((180));style 353 fill:#f00,stroke:#333,stroke-width:4px;180((180))-->181((181));style 180 fill:#f00,stroke:#333,stroke-width:4px;181((181))--PANEL_SUCCESS-->166((166));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--LOAN_QC_REJECTED-->358((358));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--QC_REJECTED-->183((183));style 181 fill:#f00,stroke:#333,stroke-width:4px;183((183))-->114((114));style 183 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->181((181));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->180((180));style 114 fill:#f00,stroke:#333,stroke-width:4px;347((347))--LMS_CALLBACK_SUCCESS-->330((330));style 347 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->350((350));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))--PREDISBURSAL_FAILED-->357((357));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->555((555));style 166 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->350((350));style 357 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->555((555));style 357 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_SUCCESS-->700((700));style 350 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_FAILED-->701((701));style 350 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->700((700));style 555 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->701((701));style 555 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_SUCCESS-->346((346));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->346((346));style 701 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_FAILED-->347((347));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->347((347));style 701 fill:#f00,stroke:#333,stroke-width:4px;347((347))-->346((346));style 347 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LOAN_APPLICATION_REJECTED-->351((351));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->351((351));style 701 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->347((347));style 351 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->346((346));style 351 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->330((330));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_REJECTED-->333((333));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING-->334((334));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_FAILED-->345((345));style 346 fill:#f00,stroke:#333,stroke-width:4px;330((330))--LEAD_SUCCESSFULLY_CLOSED-->156((156));style 330 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_SUCCESS-->167((167));style 333 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_ERROR-->168((168));style 333 fill:#f00,stroke:#333,stroke-width:4px;167((167))--LEAD_FAILURE-->504((504));style 167 fill:#f00,stroke:#333,stroke-width:4px;168((168))-->504((504));style 168 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->330((330));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->333((333));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->345((345));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->334((334));style 334 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->330((330));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->333((333));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->334((334));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->345((345));style 345 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->114((114));style 112 fill:#f00,stroke:#333,stroke-width:4px;700((700))-->350((350));style 700 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->504((504));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING_BANK_PAN-->359((359));style 346 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->358((358));style 112 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->350((350));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->357((357));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->555((555));style 114 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->428((428));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->558((558));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->179((179));style 558 fill:#f00,stroke:#333,stroke-width:4px;366((366))--UPDATE_LOAN_OFFER-->377((377));style 366 fill:#f00,stroke:#333,stroke-width:4px;377((377))-->355((355));style 377 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->428((428));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->428((428));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->179((179));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->179((179));style 114 fill:#f00,stroke:#333,stroke-width:4px;style 114 fill:#f00,stroke:#333,stroke-width:4px;`",
}
`graph TB;112((112))--BRE_RESPONSE_AWAITED-->366((366));style 112 fill:#0f0,stroke:#333,stroke-width:4px;style 112 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_SUCCESS-->355((355));style 366 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_ERROR-->356((356));style 366 fill:#f00,stroke:#333,stroke-width:4px;355((355))--MAQUETTE_FRAUD_CHECK_FAILURE-->179((179));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANKING_ACTION_DONE-->428((428));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANK_VALIDATION_PENDING-->558((558));style 355 fill:#f00,stroke:#333,stroke-width:4px;558((558))--DOCUMENT_UPLOADED-->114((114));style 558 fill:#f00,stroke:#333,stroke-width:4px;114((114))--EMANDATE_SUCCESS-->557((557));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->557((557));style 428 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_AGREEMENT_SUCCESS-->353((353));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--APPLICATION_PENDING-->555((555));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_APPLICATION_ACCEPTED-->350((350));style 557 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ACTION_PENDING-->181((181));style 353 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ALLOCATION_REJECTED-->180((180));style 353 fill:#f00,stroke:#333,stroke-width:4px;180((180))-->181((181));style 180 fill:#f00,stroke:#333,stroke-width:4px;181((181))--PANEL_SUCCESS-->166((166));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--LOAN_QC_REJECTED-->358((358));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--QC_REJECTED-->183((183));style 181 fill:#f00,stroke:#333,stroke-width:4px;183((183))-->114((114));style 183 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->181((181));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->180((180));style 114 fill:#f00,stroke:#333,stroke-width:4px;347((347))--LMS_CALLBACK_SUCCESS-->330((330));style 347 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->350((350));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))--PREDISBURSAL_FAILED-->357((357));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->555((555));style 166 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->350((350));style 357 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->555((555));style 357 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_SUCCESS-->700((700));style 350 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_FAILED-->701((701));style 350 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->700((700));style 555 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->701((701));style 555 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_SUCCESS-->346((346));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->346((346));style 701 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_FAILED-->347((347));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->347((347));style 701 fill:#f00,stroke:#333,stroke-width:4px;347((347))-->346((346));style 347 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LOAN_APPLICATION_REJECTED-->351((351));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->351((351));style 701 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->347((347));style 351 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->346((346));style 351 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->330((330));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_REJECTED-->333((333));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING-->334((334));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_FAILED-->345((345));style 346 fill:#f00,stroke:#333,stroke-width:4px;330((330))--LEAD_SUCCESSFULLY_CLOSED-->156((156));style 330 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_SUCCESS-->167((167));style 333 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_ERROR-->168((168));style 333 fill:#f00,stroke:#333,stroke-width:4px;167((167))--LEAD_FAILURE-->504((504));style 167 fill:#f00,stroke:#333,stroke-width:4px;168((168))-->504((504));style 168 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->330((330));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->333((333));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->345((345));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->334((334));style 334 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->330((330));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->333((333));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->334((334));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->345((345));style 345 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->114((114));style 112 fill:#f00,stroke:#333,stroke-width:4px;700((700))-->350((350));style 700 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->504((504));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING_BANK_PAN-->359((359));style 346 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->358((358));style 112 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->350((350));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->357((357));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->555((555));style 114 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->428((428));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->558((558));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->179((179));style 558 fill:#f00,stroke:#333,stroke-width:4px;366((366))--UPDATE_LOAN_OFFER-->377((377));style 366 fill:#f00,stroke:#333,stroke-width:4px;377((377))-->355((355));style 377 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->428((428));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->428((428));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->179((179));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->179((179));style 114 fill:#f00,stroke:#333,stroke-width:4px;style 114 fill:#f00,stroke:#333,stroke-width:4px;`
Even though the syntax is correct I am getting the syntax error in grap message.
if I hardcode the same in the code and it works fine.
<WorkflowGraph
chart={`graph TB;112((112))--BRE_RESPONSE_AWAITED-->366((366));style 112 fill:#0f0,stroke:#333,stroke-width:4px;style 112 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_SUCCESS-->355((355));style 366 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_ERROR-->356((356));style 366 fill:#f00,stroke:#333,stroke-width:4px;355((355))--MAQUETTE_FRAUD_CHECK_FAILURE-->179((179));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANKING_ACTION_DONE-->428((428));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANK_VALIDATION_PENDING-->558((558));style 355 fill:#f00,stroke:#333,stroke-width:4px;558((558))--DOCUMENT_UPLOADED-->114((114));style 558 fill:#f00,stroke:#333,stroke-width:4px;114((114))--EMANDATE_SUCCESS-->557((557));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->557((557));style 428 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_AGREEMENT_SUCCESS-->353((353));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--APPLICATION_PENDING-->555((555));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_APPLICATION_ACCEPTED-->350((350));style 557 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ACTION_PENDING-->181((181));style 353 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ALLOCATION_REJECTED-->180((180));style 353 fill:#f00,stroke:#333,stroke-width:4px;180((180))-->181((181));style 180 fill:#f00,stroke:#333,stroke-width:4px;181((181))--PANEL_SUCCESS-->166((166));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--LOAN_QC_REJECTED-->358((358));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--QC_REJECTED-->183((183));style 181 fill:#f00,stroke:#333,stroke-width:4px;183((183))-->114((114));style 183 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->181((181));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->180((180));style 114 fill:#f00,stroke:#333,stroke-width:4px;347((347))--LMS_CALLBACK_SUCCESS-->330((330));style 347 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->350((350));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))--PREDISBURSAL_FAILED-->357((357));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->555((555));style 166 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->350((350));style 357 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->555((555));style 357 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_SUCCESS-->700((700));style 350 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_FAILED-->701((701));style 350 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->700((700));style 555 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->701((701));style 555 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_SUCCESS-->346((346));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->346((346));style 701 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_FAILED-->347((347));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->347((347));style 701 fill:#f00,stroke:#333,stroke-width:4px;347((347))-->346((346));style 347 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LOAN_APPLICATION_REJECTED-->351((351));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->351((351));style 701 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->347((347));style 351 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->346((346));style 351 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->330((330));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_REJECTED-->333((333));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING-->334((334));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_FAILED-->345((345));style 346 fill:#f00,stroke:#333,stroke-width:4px;330((330))--LEAD_SUCCESSFULLY_CLOSED-->156((156));style 330 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_SUCCESS-->167((167));style 333 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_ERROR-->168((168));style 333 fill:#f00,stroke:#333,stroke-width:4px;167((167))--LEAD_FAILURE-->504((504));style 167 fill:#f00,stroke:#333,stroke-width:4px;168((168))-->504((504));style 168 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->330((330));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->333((333));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->345((345));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->334((334));style 334 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->330((330));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->333((333));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->334((334));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->345((345));style 345 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->114((114));style 112 fill:#f00,stroke:#333,stroke-width:4px;700((700))-->350((350));style 700 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->504((504));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING_BANK_PAN-->359((359));style 346 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->358((358));style 112 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->350((350));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->357((357));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->555((555));style 114 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->428((428));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->558((558));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->179((179));style 558 fill:#f00,stroke:#333,stroke-width:4px;366((366))--UPDATE_LOAN_OFFER-->377((377));style 366 fill:#f00,stroke:#333,stroke-width:4px;377((377))-->355((355));style 377 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->428((428));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->428((428));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->179((179));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->179((179));style 114 fill:#f00,stroke:#333,stroke-width:4px;style 114 fill:#f00,stroke:#333,stroke-width:4px;`}
/>
Your API response includes backticks that surround the actual data:
{
"statusCode": 0,
"graphData": "`graph TB;112((112))--BRE_RESPONSE_AWAITED-->366((366));style 112 fill:#0f0,stroke:#333,stroke-width:4px;style 112 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_SUCCESS-->355((355));style 366 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_ERROR-->356((356));style 366 fill:#f00,stroke:#333,stroke-width:4px;355((355))--MAQUETTE_FRAUD_CHECK_FAILURE-->179((179));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANKING_ACTION_DONE-->428((428));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANK_VALIDATION_PENDING-->558((558));style 355 fill:#f00,stroke:#333,stroke-width:4px;558((558))--DOCUMENT_UPLOADED-->114((114));style 558 fill:#f00,stroke:#333,stroke-width:4px;114((114))--EMANDATE_SUCCESS-->557((557));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->557((557));style 428 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_AGREEMENT_SUCCESS-->353((353));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--APPLICATION_PENDING-->555((555));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_APPLICATION_ACCEPTED-->350((350));style 557 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ACTION_PENDING-->181((181));style 353 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ALLOCATION_REJECTED-->180((180));style 353 fill:#f00,stroke:#333,stroke-width:4px;180((180))-->181((181));style 180 fill:#f00,stroke:#333,stroke-width:4px;181((181))--PANEL_SUCCESS-->166((166));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--LOAN_QC_REJECTED-->358((358));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--QC_REJECTED-->183((183));style 181 fill:#f00,stroke:#333,stroke-width:4px;183((183))-->114((114));style 183 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->181((181));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->180((180));style 114 fill:#f00,stroke:#333,stroke-width:4px;347((347))--LMS_CALLBACK_SUCCESS-->330((330));style 347 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->350((350));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))--PREDISBURSAL_FAILED-->357((357));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->555((555));style 166 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->350((350));style 357 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->555((555));style 357 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_SUCCESS-->700((700));style 350 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_FAILED-->701((701));style 350 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->700((700));style 555 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->701((701));style 555 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_SUCCESS-->346((346));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->346((346));style 701 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_FAILED-->347((347));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->347((347));style 701 fill:#f00,stroke:#333,stroke-width:4px;347((347))-->346((346));style 347 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LOAN_APPLICATION_REJECTED-->351((351));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->351((351));style 701 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->347((347));style 351 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->346((346));style 351 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->330((330));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_REJECTED-->333((333));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING-->334((334));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_FAILED-->345((345));style 346 fill:#f00,stroke:#333,stroke-width:4px;330((330))--LEAD_SUCCESSFULLY_CLOSED-->156((156));style 330 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_SUCCESS-->167((167));style 333 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_ERROR-->168((168));style 333 fill:#f00,stroke:#333,stroke-width:4px;167((167))--LEAD_FAILURE-->504((504));style 167 fill:#f00,stroke:#333,stroke-width:4px;168((168))-->504((504));style 168 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->330((330));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->333((333));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->345((345));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->334((334));style 334 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->330((330));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->333((333));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->334((334));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->345((345));style 345 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->114((114));style 112 fill:#f00,stroke:#333,stroke-width:4px;700((700))-->350((350));style 700 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->504((504));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING_BANK_PAN-->359((359));style 346 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->358((358));style 112 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->350((350));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->357((357));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->555((555));style 114 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->428((428));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->558((558));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->179((179));style 558 fill:#f00,stroke:#333,stroke-width:4px;366((366))--UPDATE_LOAN_OFFER-->377((377));style 366 fill:#f00,stroke:#333,stroke-width:4px;377((377))-->355((355));style 377 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->428((428));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->428((428));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->179((179));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->179((179));style 114 fill:#f00,stroke:#333,stroke-width:4px;style 114 fill:#f00,stroke:#333,stroke-width:4px;`",
^
}
That's why you have a syntax error. Remove it in the data to fix the problem.
You must've copy-pasted the data INCLUDING the backticks from other code and forgot to remove them.