Skip to content

Add images to flowchart boxes / connections #4

@stefan123t

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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions