Mermaid diagrams not working
opened this issue · comments
Description
The mermaid.ink url generated by Structurizr lite is incorrectly encoded and does not work. Suppose I want to include this basic mermaid diagram in an image view:
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
I can see my web browser attempts a get request to this url to get the image but it fails with the message "invalid encoded code".
After fiddling around a bit, I found using this technique to encode the diagram worked:
mermaid_content = """
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
"""
encoded_mermaid_content = base64.urlsafe_b64encode(mermaid_content.encode('utf-8')).decode('utf-8')It produces this working url which successfully generates the diagram:
I'm using the latest structurizr lite docker image.
Steps to reproduce
- Include a valid mermaid diagram file in your structurizr project.
- Include a basic image view like so:
image myComponent{
mermaid codeDiagrams/mermaidDiagram.md
} - Start Structurizr lite and attempt to examine the image view.
Screenshot
No response
Code sample
No response
Configuration
No response
Severity
Minor
Priority
Low
Resolution
I have no budget and there's no rush, please fix this for free
More information
No response