Skip to content

Class diagram not allowing css properties containing a dash character. #7306

@DavidSeptimus

Description

@DavidSeptimus

Description

When styling class diagram elements using style or classDef statements, css properties containing a - character (e.g., font-family) cause a rendering failure.

Steps to reproduce

  1. Try to set font-family using a style or classDef statement in a class diagram.
  2. Render fails

Screenshots

Image

Code Sample

https://develop.git.mermaid.live/edit#pako:eNo9kE1vgzAMhv9K5DNDEAJrcm2v22HaacrFI6aNRpIqBG0d4r8voK4n-3lff8kL9MEQKOhHnKaTxXNEp732O7Nj8Amtp6iUws_-YZxoYJnZkP2nAZ0db-rdOprYK32zt-DQb7VQwDlaAyrFmQpwFB1uCIv2jGlIF3KkQeXUYPzSoP2ae67oP0Jw_20xzOcLqAHHKdN8NZjofulDjeQNxWOYfQLV7iNALfCToalKKYXs5HMruGyyecuqaMqqaXl9qDiXQnRrAb_7zqrkQkp5qFvO266qa9kVQMamEF_ur9rC-ge-NWQV

Setup

  • Mermaid version: 11.12.2
  • Browser and Version: Chrome 143.0.7499.170

Suggested Solutions

Improve style property parsing.

Additional Context

No response

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions