Er diagram breaks if add pk/fk or comment

[uselessscat]

Describe the bug
The preview breaks when add a key before a field definition in erDiagram.

To Reproduce
Link to Live Editor: Link

Steps to reproduce the behavior:

1. Create a new er diagram
2. Use this example

   erDiagram
   
   Users {
       string email PK
       string name
   }
   
   Users2 {
       string email "comment"
       string name
   }
   

3. The editor should show tables with overlapped text
4. If I use both PK and comment in one table, then the editor shows nothing

   erDiagram
   
   Users {
       string email "comment"
       string name PK
   }
   

Expected behavior
Im not sure how this should work. in the documentation it says that I can add a key, but no example of how this will look is provided:

Screenshots

Desktop (please complete the following information):

• OS: Windows 11 Pro 21H2 22000.194
• Browser: Edge 94.0.992.38

[sidharthv96]

To reproduce the example

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string allowedDriver FK 'The license of the allowed driver'
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string driversLicense PK 'The license #'
        string firstName
        string lastName
        int age
    }

[durgakiran]

@sidharthv96 I would like to take look into this if no one is looking.

[sidharthv96]

Of course @durgakiran !

All issues without active PRs are open for everyone to tackle 😇

[RonaldZielaznicki]

@durgakiran @sidharthv96 Some information that may help.

mermaid-js/mermaid#2548 (comment)

[sidharthv96]

Fixed in mermaid-js/mermaid#3168