# Discourse Mermaid

**URL:** <https://meta.discourse.org/t/discourse-mermaid/218242>\
**Category:** Theme component\
**Tags:** official, mermaid\
**Created:** [February 15, 2022, 2:16pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242 "2022-02-15T14:16:15Z")\
**Posts on this page:** 1\
**Showing post:** 46

<div class="post-metadata">

**Author:** ![volas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volas/32/130651_2.png) [@volas](https://meta.discourse.org/u/volas)\
**Post date:** [April 18, 2025, 7:25am UTC](https://meta.discourse.org/t/discourse-mermaid/218242/46 "2025-04-18T07:25:27Z")

</div>

Scaling works strange in Firefox, and I can’t zoom in the chart with large height.

How it looks in the post:

> **Post screenshot**
>
> ![Снимок экрана от 2025-04-18 10-14-10](https://global.discourse-cdn.com/meta/original/4X/7/3/3/733a2769d9da44fd8c383521a24c32e402dd7cad.png)

How it looks when expanded (click does nothing, but if chart is LR then I can click for zooming):

> **Expanded screenshot**
>
> ![Снимок экрана от 2025-04-18 10-15-50](https://global.discourse-cdn.com/meta/original/4X/a/9/e/a9ebbcb184889fc8efb7f8b8a4b2902163af521c.png)

Mermaid chart from the example:

> **Chart**
>
> ```mermaid
> flowchart TD
> A["Lorem ipsum dolor"] --> B["Sit amet consectetur"]
> A --> C["Adipiscing elit sed"]
> B --> E["Do eiusmod tempor"]
> C --> D["Incididunt ut labore"]
> D --> F["Et dolore magna"]
> E --> G["Aliqua ut enim"]
> F --> G
> G --> H["Ad minim veniam"]
> H --> I["Quis nostrud exercitation"]
> C --> J["Ullamco laboris nisi"]
> I --> K["Ut aliquip ex"]
> J --> L["Ea commodo consequat"]
> L --> M["Duis aute irure"]
> M --> N["Dolor in reprehenderit"]
> N --> O["In voluptate velit"]
> K --> P["Esse cillum dolore"]
> P --> Q["Eu fugiat nulla"]
> Q --> R["Pariatur excepteur sint"]
> L --> S["Occaecat cupidatat non"]
> F --> T["Proident sunt in"]
> S --> U["Culpa qui officia"]
> U --> V["Deserunt mollit anim"]
> R --> W["Id est laborum"]
> W --> X["Sed ut perspiciatis"]
> O --> Y["Unde omnis iste"]
> X --> Z["Natus error sit"]
> Z --> AA["Voluptatem accusantium doloremque"]
> AA --> AB["Laudantium totam rem"]
> AB --> AC["Aperiam eaque ipsa"]
> AC --> AD["Quae ab illo"]
> T --> Y
> V --> Q
> D --> M
> E --> R
> 
> ```

In chrome it works better.

---

_[View the full topic](https://meta.discourse.org/t/discourse-mermaid/218242)._