feat(cli): support mermaid diagrams within GFM (github flavored markdown)

[aloisklink]

Draft PR: This PR is stacked on top of:

• feat(cli): support pull/push/link on multiple mermaid files at once #15, which is stacked on top of
• Add a @mermaidchart/cli CLI tool for accessing Mermaid Chart #12, which is stacked on top of
• feat: add setDocument(document) API function #11, which is stacked on top of
• feat: add deleteDocument(documentID) API func #10, which is stacked on top of
• feat: add createDocument(projectID) API function #9.

Please change this PR to target main once #15 has been merged.

📖 Description

Support mermaid diagrams that are embedded within GFM (GitHub flavoured markdown) .md or .markdown markdown files.

Example

For example, given a markdown file that looks like:

# Here is my Mermaid diagram in a quote in a list

* This is my list
  * This is my list
    1. This is my entry with the diagram:
       > Here is my quote with the diagram:
       >
       > ```mermaid
       > ---
       > title: This is my diagram title
       > ---
       > flowchart
       >     A[Hello World]
       > ```

After running mermaid-chart link ./path/to/my/markdown/file.md, we'd expect the output file to look like:

# Here is my Mermaid diagram in a quote in a list

* This is my list
  * This is my list
    1. This is my entry with the diagram:
       > Here is my quote with the diagram:
       >
       > ```mermaid
       > ---
       > title: This is my diagram title
       > id: 'diagram-id-on-mermaidchart.com'
       > ---
       > flowchart
       >     A[Hello World]
       > ```

Implementation details

We're using remark to parse the markdown into a markdown AST. remark by default only supports CommonMark, however, with remark-gfm and remark-frontmatter we can support GFM (GitHub flavoured markdown, which is used by GitHub.

From this, we process every code block that has lang=mermaid, then turn the mdAST back to a string.

This means that we also automatically format/prettify the user's markdown input, which is potentially unideal, as it might break somebody's markdown file if they're using an unusual dialect of markdown, but I can't think of a better way to do this.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
office-plugin-site	⬜️ Ignored (Inspect)	Visit Preview		Mar 6, 2024 4:15pm