vscode-markdown-preview-enhanced icon indicating copy to clipboard operation
vscode-markdown-preview-enhanced copied to clipboard

[BUG] Unable to render mermaid diagram through kroki server

Open Alsan opened this issue 4 months ago • 0 comments

Describe the bug Unable to generate mermaid diagram in MPE, but work as expected using curl. Other diagram type using external kroki docker, such as bpmn, excalidraw, can works as expected.

The generated error message:

UnknownDiagramError: No diagram type detected matching given configuration for text: JohnBobAliceJohnBobAlice#container{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#container .error-icon{fill:#552222;}#container .error-text{fill:#552222;stroke:#552222;}#container .edge-thickness-normal{stroke-width:2px;}#container .edge-thickness-thick{stroke-width:3.5px;}#container .edge-pattern-solid{stroke-dasharray:0;}#container .edge-pattern-dashed{stroke-dasharray:3;}#container .edge-pattern-dotted{stroke-dasharray:2;}#container .marker{fill:#333333;stroke:#333333;}#container .marker.cross{stroke:#333333;}#container svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#container .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#container text.actor>tspan{fill:black;stroke:none;}#container .actor-line{stroke:grey;}#container .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#container .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#container #arrowhead path{fill:#333;stroke:#333;}#container .sequenceNumber{fill:white;}#container #sequencenumber{fill:#333;}#container #crosshead path{fill:#333;stroke:#333;}#container .messageText{fill:#333;stroke:none;}#container .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#container .labelText,#container .labelText>tspan{fill:black;stroke:none;}#container .loopText,#container .loopText>tspan{fill:black;stroke:none;}#container .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#container .note{stroke:#aaaa33;fill:#fff5ad;}#container .noteText,#container .noteText>tspan{fill:black;stroke:none;}#container .activation0{fill:#f4f4f4;stroke:#666;}#container .activation1{fill:#f4f4f4;stroke:#666;}#container .activation2{fill:#f4f4f4;stroke:#666;}#container .actorPopupMenu{position:absolute;}#container .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#container .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#container .actor-man circle,#container line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#container :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}loop[Healthcheck]Rational thoughts prevail...Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!

Environment

  • OS: Garuda Linux x86_64
  • VSCode: 1.94.2
  • Markdown Preview Enhanced: 0.8.14

To Reproduce Steps to reproduce the behavior:

  1. Start kroki containers
  2. Set kroki server address
  3. Write markdown with mermaid code block, specify using kroki
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Markdown file

# Kroki test <!-- omit in toc -->

## Diagrams
### Block diagram
@import "./diagrams/blockdiag.diag" {as=blockdiag kroki=true}
@import "./diagrams/blockdiag.diag"


### Sequence diagram
@import "./diagrams/seqdiag.diag" {as=seqdiag kroki=true}
@import "./diagrams/seqdiag.diag"

### Activity diagram
@import "./diagrams/actdiag.diag" {as=actdiag kroki=true}
@import "./diagrams/actdiag.diag"

### Network diagram
@import "./diagrams/nwdiag.diag" {as=nwdiag kroki=true}
@import "./diagrams/nwdiag.diag"

### Packet diagram
@import "./diagrams/packetdiag.diag" {as=packetdiag kroki=true}
@import "./diagrams/packetdiag.diag"

### Rack diagram
@import "./diagrams/rackdiag.diag" {as=rackdiag kroki=true}
@import "./diagrams/rackdiag.diag"

### Graphviz diagram
@import "./diagrams/dot.diag" {as=dot kroki=true}
@import "./diagrams/dot.diag"

### Commit graph
@import "./diagrams/commit.diag" {as=pikchr kroki=true}
@import "./diagrams/commit.diag"

### Entity Relationship Diagram
@import "./diagrams/erd.diag" {as=erd kroki=true}
@import "./diagrams/erd.diag"

### Hand-drawn like diagrams
@import "./diagrams/excalidraw.diag" {as=excalidraw kroki=true}
@import "./diagrams/excalidraw.diag" {as=json}

### Word Cloud
@import "./diagrams/word-cloud.diag" {as=vega kroki=true}
@import "./diagrams/word-cloud.diag" {as=json}

### Diverging Stacked Bar Chart (Vega-lite)
@import "./diagrams/stackchart.diag" {as=vegalite kroki=true}
@import "./diagrams/stackchart.diag" {as=json}

### Cojugate prior relationships
@import "./diagrams/cojugate-prior-relationships.diag" {as=ditaa kroki=true}
@import "./diagrams/cojugate-prior-relationships.diag"

### Sequence diagram
@import "./diagrams/mermaid-sequence.diag" {as=mermaid kroki=true}
@import "./diagrams/mermaid-sequence.diag"

### UML diagram
@import "./diagrams/nomnoml.diag" {as=nomnoml kroki=true}
@import "./diagrams/nomnoml.diag"

### Use case diagram
@import "./diagrams/usecase.diag" {as=plantuml kroki=true}
@import "./diagrams/usecase.diag"

### Work Breakdown Structure
@import "./diagrams/wbs.diag" {as=plantuml kroki=true}
@import "./diagrams/wbs.diag"

### Gantt Chart
@import "./diagrams/gantt-chart.diag" {as=mermaid kroki=true}
@import "./diagrams/gantt-chart.diag"

### Syntax diagram
@import "./diagrams/syntax.diag" {as=pikchr kroki=true}
@import "./diagrams/syntax.diag"

### Mind Map
@import "./diagrams/mindmap.diag" {as=plantuml kroki=true}
@import "./diagrams/mindmap.diag"

### BPMN
@import "./diagrams/bpmn.diag" {as=bpmn kroki=true}
@import "./diagrams/bpmn.diag" {as=xml}

### Bytefield
@import "./diagrams/bytefield.diag" {as=bytefield kroki=true}
@import "./diagrams/bytefield.diag"

### Digital Timing diagram

@import "./diagrams/wavedrom.diag" {as=wavedrom kroki=true}
@import "./diagrams/wavedrom.diag"

### Connected Servers
@import "./diagrams/connected-servers.diag" {as=svgbob kroki=true}
@import "./diagrams/connected-servers.diag"

### Ascii Art
@import "./diagrams/ascii-art.diag" {as=svgbob kroki=true}
@import "./diagrams/ascii-art.diag"

### Impossible trident
@import "./diagrams/impossible-trident.diag" {as=pikchr kroki=true}
@import "./diagrams/impossible-trident.diag"

### Context diagram
@import "./diagrams/context.diag" {as=c4plantuml kroki=true}
@import "./diagrams/context.diag"

### Container diagram
@import "./diagrams/container.diag" {as=c4plantuml kroki=true}
@import "./diagrams/container.diag"

### Container diagram
@import "./diagrams/structurizer.diag" {as=structurizr kroki=true}
@import "./diagrams/structurizer.diag"

### Component diagram
@import "./diagrams/component.diag" {as=c4plantuml kroki=true}
@import "./diagrams/component.diag"

### State machine
@import "./diagrams/state-machine.diag" {as=umlet kroki=true}
@import "./diagrams/state-machine.diag" {as=xml}

### Wiring system
@import "./diagrams/wiring.diag" {as=wireviz kroki=true}
@import "./diagrams/wiring.diag"

### Hardware structure/behavior
@import "./diagrams/symbolator.diag" {as=symbolator kroki=true}
@import "./diagrams/symbolator.diag"

ref: [examples](https://kroki.io/examples.html)

Screenshots satty_20241023172242

Alsan avatar Oct 23 '24 09:10 Alsan