디스커스 머마

:discourse2: 요약 Discourse Mermaid를 사용하면 Mermaid 문법을 활용해 매우 강력한 그래프를 만들 수 있습니다.
:eyeglasses: 미리보기 Discourse Theme Creator에서 미리보기
:hammer_and_wrench: 레포지토리 링크 https://github.com/discourse/discourse-mermaid-theme-component
:open_book: Discourse 테마가 처음이신가요? Discourse 테마 사용 가이드

이 테마 컴포넌트 설치

사용법

```mermaid height=200
graph TD;
  A --> B;
```

Mermaid 문법에 대해 더 자세히 알아보세요: Mermaid | Diagramming and charting tool

:warning: 이메일에서는 그래프가 렌더링되지 않습니다

설정

이름 설명
svg 아이콘
번역 기본값
rendering_error

<b>오류</b><p>mermaid 코드가 <a href=‘https://mermaid.live/’>mermaid.live에서 실행되고 있는지, 그리고 4칸 들여쓰기로 되어 있는지 확인하세요. 예: <pre><code> flowchart TB
A → B</code></pre></p>

insert_mermaid_sample Mermaid 차트

:discourse2: 우리가 호스팅을 하고 있나요? 테마 컴포넌트는 Pro, Business, Enterprise 플랜에서 사용 가능합니다.

31개의 좋아요

Chart does not display icon when you use fontawesome:

I failed when I tesed with this:

flowchart LR
    A>fas:fa-plane-departure Airline] -->|11/04/2024| B

But it is ok if you test here:

A feature request has been posted here:

3개의 좋아요

3 posts were split to a new topic: Upgrade Mermaid to 10.6.1

Is it possible to generate an SVG instead of PNG?

Hi, welcome :wave:

This doesn’t generate an image. It renders an SVG HTML element. If you refer to the example in the first post, it is meant to be a screenshot of the result. I understand it might be confusing. You can see a live example below:

graph TD;
  A --> B;
3개의 좋아요

2 posts were merged into an existing topic: Scaling issue for charts

Hi there,
Don’t suppose there is a way to mimic the “rough” style that can be found in the Mermaid previewer (top right):
CleanShot 2025-03-04 at 14.11.16

I’m guessing it’s a slim chance since the code doesn’t actually change, but worth a shot!

2개의 좋아요

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

How it looks in the post:

Post screenshot

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

Expanded screenshot

Mermaid chart from the example:

Chart
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.

Mermaid also places errors at the end of the <body> tag of discourse

1개의 좋아요

post was originally written in Русский

Huh. It was in English except the image name. Thanks, discourse.

What i actually wrote:

Mermaid also places errors at the end of the <body> tag of discourse

I get this as well after submitting changes, but if I refresh my page the error goes away. IMO not something which breaks functionality, but definitely undermines the otherwise great experience.

Is click currently supported within mermaid diagrams?

flowchart TD
   start --> relative
   relative --> absolute
   absolute --> external

   click relative "/categories" "tooltip1"
   click absolute "https://meta.discourse.org/docs" "tooltip2"
   click external "https://github.com/" "tooltip3"

I can see the link being created in the page source, but they aren’t working.

이 컴포넌트는 어떤 버전의 mermaid를 지원하나요?

https://github.com/discourse/discourse-mermaid-theme-component/blob/main/about.json

2개의 좋아요

Discourse Mermaid 플러그인의 업데이트 주기, 특히 그 기반이 되는 mermaid.js 라이브러리의 업데이트 주기는 보통 어느 정도인가요? 11.14 버전부터 베타 버전으로 Wardley Mapping 차트 유형이 추가되었는데, 이는 제 커뮤니티에 상당한 관심을 끌고 있어 이렇게 질문하게 되었습니다.

현재 최신 버전은 11.15.0이며, Wardley 기능이 이제 안정적으로 작동한다고 보고되고 있습니다.

PR(풀 리퀘스트)이 받아들여진다면, 기꺼이 작성해 보겠습니다!

2개의 좋아요

PR은 정말로 환영합니다!

3개의 좋아요
3개의 좋아요