디스커스 머마

: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개의 좋아요

다음과 같이 fontawesome를 사용할 때 차트에 아이콘이 표시되지 않습니다:

아래와 같이 테스트했을 때 실패했습니다:

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

하지만 여기서 테스트하면 정상적으로 동작합니다:

기능 요청이 여기에 게시되었습니다:

3개의 좋아요

3개의 게시글이 새로운 주제로 분리되었습니다: Mermaid를 10.6.1로 업그레이드

PNG 대신 SVG를 생성할 수 있을까요?

안녕하세요, 환영합니다 :wave:

이것은 이미지를 생성하지 않습니다. SVG HTML 요소를 렌더링합니다. 첫 번째 게시글의 예시를 참고하신다면, 그것은 결과물의 스크린샷으로 의도된 것입니다. 혼란스러울 수 있다는 점을 이해합니다. 아래에서 라이브 예시를 확인하실 수 있습니다:

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

게시물 2개가 기존 주제 차트 확장 문제에 병합되었습니다.

안녕하세요,
메리미(Mermaid) 미리보기(오른쪽 위)에서 볼 수 있는 “rough” 스타일을 흉내 내는 방법이 있을까요?
CleanShot 2025-03-04 at 14.11.16

코드가 실제로 변경되지 않기 때문에 가능성이 낮을 것 같지만, 한번 시도해 볼 가치가 있습니다!

2개의 좋아요

Firefox에서 스케일링이 이상하게 작동하며, 높이가 큰 차트에서 확대가 되지 않습니다.

게시물에 표시되는 모습:

게시물 스크린샷

확장했을 때의 모습 (클릭하면 아무 반응이 없지만, 차트가 가로 방향(LR)이면 클릭으로 확대할 수 있습니다):

확장된 스크린샷

예제에서 가져온 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

Chrome에서는 더 잘 작동합니다.

Mermaid도 discourse의 <body> 태그 끝에 오류를 배치합니다.

1개의 좋아요

이 게시글은 원래 러시아어로 작성되었습니다

아. 이미지 이름을 제외하고는 영어로 되어 있었네요. 감사합니다, discourse.

제가 실제로 쓴 내용:

Mermaid가 discourse의 <body> 태그 끝에 오류를 배치합니다

저도 변경 사항을 제출한 후 이 문제가 발생합니다. 하지만 페이지를 새로고침하면 오류가 사라집니다. 제 생각에는 기능이 중단되는 문제는 아니지만, 전반적으로 훌륭한 경험을 해치는 부분입니다.

현재 Mermaid 다이어그램에서 click이 지원되나요?

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"

페이지 소스에서 링크가 생성되는 것은 볼 수 있지만, 작동하지 않습니다.

이 컴포넌트는 어떤 버전의 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개의 좋아요