마크다운은 텍스트 기반의 가벼운 마크업 언어로 다양한 문서를 작성하는 데 사용됩니다. 하지만 기본적으로는 텍스트 기반이기 때문에 복잡한 그래프나 다이어그램을 그리기는 어렵습니다.

하지만 Marked라는 JavaScript 라이브러리를 사용하면 마크다운 문서에서도 간단한 다이어그램을 만들 수 있습니다.

먼저, Marked 라이브러리를 다운로드하고 프로젝트에 추가해야 합니다. 다음은 npm을 사용하여 Marked를 설치하는 방법입니다.

npm install marked

Marked를 설치했다면, 다음과 같이 코드를 작성하여 마크다운 문서에 다이어그램을 추가할 수 있습니다.

const marked = require('marked');

// 다이어그램을 추가할 마크다운 문서
const markdown = `
# 다이어그램 예제

\`\`\`mermaid
graph LR
    A-->B
    B-->C
    C-->D
    D-->A
\`\`\`
`;

// Marked를 사용하여 마크다운을 HTML로 변환
const html = marked(markdown);

// 변환된 HTML을 출력
console.log(html);

위의 예제 코드에서는 마크다운 문서 내에 Mermaid 다이어그램을 추가했습니다. Marked는 마크다운 문서 내의 코드 블록을 파싱하여 HTML로 변환해주는 역할을 합니다. 코드 블록에서 mermaid라는 언어 이름을 사용하여 다이어그램을 작성할 수 있습니다.

위의 예제 코드를 실행하면 변환된 HTML 코드가 콘솔에 출력됩니다. 이 HTML 코드를 웹 페이지에 삽입하면 다이어그램이 정상적으로 표시됩니다.

이와 같이 Marked를 사용하여 마크다운 문서에 다이어그램을 추가할 수 있습니다. Marked는 다양한 마크다운 요소를 지원하므로, 필요에 따라 다양한 형식의 문서를 작성할 수 있습니다.

더 자세한 내용은 Marked 공식 문서를 참조하시기 바랍니다.