Skip to main content

Mermaid chart generates syntax error for valid mermaid code. This is consistently happening with code generated and valid for other mermaid diagram generators. 

Hi Helloworld!

 

I saw this recent post in the Lucid community with a Mermaid version number as 10.2.3 - I wonder whether there’s something that Mermaid has changed that is not backward compatible at some point of their versioning process?

 

In trying to think through how best to go about debugging what you’re seeing …

  • Do you have an example of Mermaid code that is failing to generate diagrams in Lucid?
  • What are some of the other places that you are seeing Mermaid accept that same Mermaid code?

Below is an example that has syntax error but generates on other interpreters.. 

 

graph TD

    subgraph "PEOPLE LAYER"

        P1("Support Engineers")

        P2("Developers")

        P3("Product Managers")

        P4("QA Team")

        P5("End Users")

    end

 

    subgraph "PROCESS LAYER"

        PR1("Incident Management")

        PR2("Problem Management")

        PR3("Change Management")

        PR4("Release Management")

        PR5("Knowledge Management")

        PR6("SLA Management")

    end

 

    subgraph "DATA LAYER"

        D1("Customer Data")

        D2("Product Configuration")

        D3("Issue Repository")

        D4("Knowledge Base")

        D5("Performance Metrics")

        D6("Historical Data")

    end

 

    subgraph "APPLICATION LAYER"

        subgraph "Ticketing System"

            A1("Ticketing System")

            AF1("Incident Logging")

            AF2("Root Cause Analysis")

        end

       

        subgraph "Monitoring Tools"

            A2("Monitoring Tools")

            AF5("Performance Monitoring")

        end

       

        subgraph "Version Control System"

            A3("Version Control System")

            AF3("Code Deployment")

            AF4("Automated Testing")

        end

       

        subgraph "Documentation System"

            A4("Documentation System")

        end

       

        subgraph "Analytics Dashboard"

            A5("Analytics Dashboard")

            AF6("Reporting")

        end

    end

 

    subgraph "INTERFACES LAYER"

        I1("User Portal")

        I2("Admin Console")

        I3("Developer API")

        I4("Mobile Interface")

        I5("Integration Points")

    end

 

    %% Connections between layers

    P1 --> PR1

    P1 --> PR2

    P2 --> PR3

    P2 --> PR4

    P3 --> PR5

    P4 --> PR6

    P5 --> PR1

 

    PR1 --> D3

    PR2 --> D3

    PR3 --> D2

    PR4 --> D2

    PR5 --> D4

    PR6 --> D5

 

    D1 --> A1

    D2 --> A3

    D3 --> A1

    D4 --> A4

    D5 --> A5

    D6 --> A5

 

    A1 --> I1

    A1 --> I2

    A2 --> I2

    A3 --> I3

    A3 --> I5

    A4 --> I1

    A5 --> I2

    A5 --> I4

 

    %% Style classes

    classDef people fill:#FFC3A1,stroke:#333,stroke-width:1px

    classDef process fill:#D8B4F8,stroke:#333,stroke-width:1px

    classDef data fill:#A7D2CB,stroke:#333,stroke-width:1px

    classDef application fill:#F8C8DC,stroke:#333,stroke-width:1px

    classDef function fill:#F9F5E7,stroke:#333,stroke-width:1px

    classDef interface fill:#D3CEDF,stroke:#333,stroke-width:1px

 

    %% Apply styles

    class P1,P2,P3,P4,P5 people

    class PR1,PR2,PR3,PR4,PR5,PR6 process

    class D1,D2,D3,D4,D5,D6 data

    class A1,A2,A3,A4,A5 application

    class AF1,AF2,AF3,AF4,AF5,AF6 function

    class I1,I2,I3,I4,I5 interface

 


It would be helpful if Lucid returned the actual syntax errors, similar to how https://mermaid.live/ handles it.


Reply