Markdown에서 인어 다이어그램 제작

인어 다이어그램과 흐름도는 특히 Markdown에서 기본적으로 지원된다는 Github의 발표와 함께 트랙션을 얻고 있습니다. 그들이 무엇인지, 어떻게 사용하는지, 그리고 중요한 이유를 살펴 보겠습니다.

문서 소스에 Codepen 데모를 직접 포함시키고 싶을 때, 텍스트에 인접한 다이어그램과 차트가 썩어가는 것을 방지하는 데 도움이됩니다. 즉, 문서의 상태와 동기화되지 않습니다. 코드에서 도움이되지 않거나 쓸모 없거나 오도하는 댓글이 댓글이 없는 것 보다 객관적으로 나빠질 수있는 것처럼, 다이어그램도 마찬가지입니다.

인어 다이어그램은 Jamstack 및 정적 사이트 생성기와 잘 어울립니다. 페어링은 자연 스럽습니다. 인어 다이어그램은 마크 다운 배출이 아니지만 마크 다운에서 영감을 얻습니다. 동일한 마크 업 추상화를 사용하여 Markdown은 코드를 공급하기 위해 제공하기 위해 출력 다이어그램 및 흐름도와 동일하게 표시 될 수 있습니다. 그리고 마크 다운은 땅콩 버터가 젤리에있는 것처럼 Jamstack과 정적 사이트입니다.

귀하의 사이트가 Markdown에 작성되어 HTML로 처리 된 경우 약간의 사용자 정의 JavaScript를 추가 할 수있는 충분한 컨트롤이 있으면이 기사에서 다루고있는 아이디어를 사용하여 자신의 요구에 맞는 아이디어를 사용하고 Mermaid의 나머지 마크 다운과 함께 편리하게 인어로 다이어그램을 구현할 수 있습니다. "다이어그램-코드"는 아직 용어입니까? 그럴 것입니다.

예를 들어, 멋진 신제품을 작업하고 있으며 Gantt 차트 (또는 다른 유형 - 흐름도, 시퀀스 및 클래스 다이어그램) 형태로 로드맵을 제공하고 싶다고 가정 해 봅시다. Mermaid를 사용하면 소수의 줄로이 작업을 수행 할 수 있습니다.

 간트
  제목 내 제품 로드맵
  DateFormat yyyy-mm-dd
  섹션 쿨 기능
  작업 : A1, 2022-02-25, 30D
  또 다른 과제 : A1, 20D 이후
  섹션 RAD 기능
  순서대로 작업 : 2022-03-04, 12d
  과제, 2 : 24d

그렇게하는 멋진 SVG 다이어그램을 렌더링합니다.

Pro Tip : Mermaid에는 Mermaid.live에 대한 약속없이 시도해 볼 수있는 라이브 편집자가 있습니다.

Markdown의 인어 다이어그램

Mermaid는 Markdown과 잘 어울립니다. Mermaid Language Syntax 세트 만 사용하여 다른 울타리 코드 블록으로 표시되기 때문입니다. 예를 들어,이 코드 블록 :

 ```인어
그래프 TD;
    A-> B;
    A-> C;
    b-> d;
    C-> D;
```

… 내부의 코드 블록 내용이있는 html 요소를 생성합니다.

 <pre class="brush:php;toolbar:false"> <code> 그래프 TD;
    A-> B;
    A-> C;
    b-> d;
    c-> d; </code> 

CommonMark 사양에 맞는 Markdown 프로세서를 사용하는 경우 더 유사합니다.

 <pre class="brush:php;toolbar:false"> <code> 그래프 TD;
    A-> B;
    A-> C;
    b-> d;
    C-> D;
코드> </code>

데모보기

Mermaid API의 기본 동작은 내용을 직접 포함하는

태그를 기대합니다. 따라서 Markdown에서 HTML에서 전환 할 때 볼 수있는 또는 <span> (구문 형광펜)이 없음을 기대합니다.<h3 id="JavaScript와-함께-미세"> JavaScript와 함께 미세</h3> <p> 약간의 JavaScript를 사용하면 Markdown 생성 된 HTML을 가져 와서 인어가 목표로하는 </p> <div> 태그로 고정시키는 것이 합리적입니다. $ element.textContent는 여기에서 목적이 있습니다. Markdown은 인어가 사용하는 특정 문자 (예 :> in & gt;)를 HTML-encode합니다. 또한 <fre> 요소의 후손 인 잘못된 HTML 요소를 걸러냅니다.<pre rel="JavaScript" data-line=""> // &lt;fre&gt; _and_ &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; &lt;code&gt;를 선택하십시오 document.querySelectorall ( &quot;pre.mermaid, pre&gt; code.language-mermaid&quot;). foreach ($ el =&gt; { // 두 번째 선택기가 인기를 얻은 경우 부모를 참조하십시오. if ($ el.tagname === &quot;Code&quot;) $ el = $ el.parentElement // 인어 내용을 예상 &lt;div&gt;에 넣습니다. // 플러스 원본 내용을 멋진 &lt;elective&gt;로 유지하십시오. $ el.outerhtml =` &lt;div&gt; $ {$ el.textContent} &lt;/div&gt; 다이어그램 소스 &lt;fre&gt; $ {$ el.textContent} 세부 사항&gt; ` })&lt;p&gt; HTML이 적절하게 형성되었으므로 렌더링을 수행하기 위해 인어를 구현합시다.&lt;/p&gt; &lt;h3 id=&quot;인어-사용&quot;&gt; 인어 사용&lt;/h3&gt; &lt;p&gt; Mermaid는 NPM 패키지로 게시되므로 UNPKG와 같은 패키지 인식 CDN을 사용하여 사본을 가져올 수 있습니다. Mermaid.core.js의 기본 내보내기 대신 미니딩 코드 (예 : Mermaid.min.js)를 사용하려고합니다. 예를 들어:&lt;/p&gt; &lt;pre rel=&quot;HTML&quot; data-line=&quot;&quot;&gt; &lt;script src=&quot;https://unpkg.com/%20%EB%A7%88%EC%9D%8C%20%EB%B3%B4%ED%98%B8%20%EB%90%9C%5D%20/dist/mermaid.min.js&quot;&gt; &lt;/script&gt;</pre> <p> Mermaid <em>도</em> ESM 준비가되어 있으므로 SkyPack을 사용하여로드 할 수 있습니다.</p> <pre rel="HTML" data-line=""> &lt;script type=&quot;module&quot;&gt; &quot;https://cdn.skypack.dev/ [email protected]&quot;에서 인어를 가져 오기; &lt;/스크립트&gt;&lt;/script&gt;</pre> <p> 일을 단순하게 유지하려면 바로 여기서 멈출 수 있습니다. 기본적으로 인어는 문서가 준비되면 자동 지침을 자동 지정합니다. Mermaid에로드하기 <em>전에</em> 앞에서 언급 한 JavaScript로 Markdown-to-HTML Finessing을하는 한 모든 설정이됩니다.</p> <p> 그러나 Mermaid에는 구성 할 가치가있는 몇 가지 설정이 있습니다.</p> <pre rel="JavaScript" data-line=""> // Mermaid를 [1] 로그 오류로 초기화하고 [2] First-Party에 대한 보안이 느슨합니다. // 제작 된 다이어그램 및 [3] 선호하는 어두운 색 구성표 존중 Mermaid.initialize ({{ 로그 레벨 : &quot;오류&quot;, // [1] SecurityLevel : &quot;느슨한&quot;, // [2] 테마 : (window.matchmedia &amp;&amp; wind &quot;어두운&quot; : &quot;기본&quot;// [3] })</pre> <ol> <li> Loglevel은 발생할 수있는 오류에 대해 약간 더 가시성을 제공합니다. 더 많은 정보를 보려면 더 많은 장황 수준 (또는 그 반대)을 선택할 수 있습니다.</li> <li> SecurityLevel은 다이어그램 소스의 신뢰 수준과 관련이 있습니다. <em>당신</em> 이 작성하는 콘텐츠라면 "느슨한"것은 괜찮습니다. 사용자가 생성 한 컨텐츠 인 경우 "엄격한"기본값을 남겨 두는 것이 가장 좋습니다.</li> <li> 테마는 렌더링 된 다이어그램의 스타일을 변경합니다. 선호하는 색 구성표를 쿼리하고 3 배 연산자를 활용하여 "Dark"를 적절하게 지정할 수 있습니다.</li> </ol> <h3 id="이제-모두-함께"> 이제 모두 함께!</h3> <p> Markdown의 인어 다이어그램 예제는 다음과 같습니다.</p> <h3 id="더-깊은-물"> 더 깊은 물</h3> <p> 이 전략은 <em>진보적</em> 이기 때문에 특히 효과적입니다. JavaScript가 비활성화되면 원래 인어 소스가 as-is가 표시됩니다. 파울이 없습니다.</p> <p> Mermaid에 대한 본격적인 명령 줄 인터페이스도 있습니다. 탐색에 흥미로운 경우 완전히 서버 측면 렌더링 된 다이어그램을 표시하도록 활용할 수 있습니다. Mermaid CLI와 온라인 생성기 사이에서 다이어그램의 스냅 샷을 생성하는 데 사용하는 빌드 프로세스에 연결하여 소스 코드 대신 <img alt="Markdown에서 인어 다이어그램 제작" > 폴백으로 표시 할 수도 있습니다.</p> <p> Mermaid가 계속 인기를 얻을 수 있으므로 이와 같은 더 많은 원시 인어 통합을 볼 수 있기를 바랍니다. 제품 로드맵에서 의사 결정 트리 및 그 사이의 모든 것에 이르기까지 문서와 함께 시각적 차트 및 다이어그램을 사용하는 것은 의심 할 여지가 없습니다. 그것은 단어만으로 문서화하기 어려운 일종의 정보입니다.</p> <p> 인어 차트는이를 해결하고 정보를 나머지 문서와 함께 관리하고 유지할 수 있도록하는 방식으로 해결합니다.</p></fre></elective> </div>