Skip to content

Add images to flowchart boxes / connections #4

Description

@stefan123t

Many thanks for this great addition to markdown in general which allows to render PDF just fine!

I would like to use either ![alt desc](img/image.fmt) or some flowchart style option to add images to flowchart boxes / connections.
I already tried default markdown syntax and also background-image: url("img/image.fmt"); css style of an otherwise scaled box.

```mermaid
flowchart TD
    step1("Step 1. ![alt desc](img/image-step1.fmt)") 
    step2("Step 2. ![alt desc](img/image-step2.fmt)") 

    step1 -->|"1.-2. ![alt desc](img/image-step1-2.fmt)"| step2

    style step1 fill:#f9f,stroke:#333,stroke-width:4px,background-image: url("img/image.fmt")
    linkStyle "1.-2. ![alt desc](img/image-step1-2.fmt)" step1 fill:#f9f,stroke:#333,stroke-width:4px,background-image: url("img/image.fmt")
\```

I have tried both and neither of the two methods works for me:

  1. the box descriptions are interpreted / remain literal
  2. the linkStyle and style properties remain ignored

You should remove the \ to have a working example.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions