Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mermaid.js Support #700

Open
garrett-wade opened this issue Feb 24, 2023 · 3 comments
Open

Mermaid.js Support #700

garrett-wade opened this issue Feb 24, 2023 · 3 comments

Comments

@garrett-wade
Copy link

Our engineers are looking to create docs with diagrams and would like to use mermaid js (https://mermaid.js.org/). Is there any plans to add mermaid support to readme's markdorn engine or an alternative?

@kellyjosephprice
Copy link
Collaborator

That would be really awesome. I think our current plan for adding more custom components, will first be adding MDX support. Presumably at that point, you'll be able to import a Mermaid component.

## Potential Example

<Mermaid>
  graph
  ...
</Mermaid>

@kellyjosephprice
Copy link
Collaborator

For a workaround now, you could write a custom transformer:

import * as rdmd from '@readme/markdown'
import mermaid from 'mermaid'

const doc = `
~~~mermaid
graph
  ...
~~~
`

const traverse = (node, fn, parent = null, index = null) => {
  fn(node, parent, index)

  if ('children' in node) {
    node.children.forEach((child, idx => traverse(child, fn, node, idx))
  }
}

const mdast = rdmd.mdast(doc)

traverse(mdast, async (node, parent, index) => {
  if (node.type === 'code' && node.lang === 'mermaid') {
    const { svg } = await mermaid.render('graphDiv', node.value);

    parent.children[index] = {
      type: 'html',
      value: svg,
    }
  }
})

console.log(rdmd.md(mdast))

@SethAngell
Copy link

Hey! Is this something we could potentially implement as a workaround within our developer hub hosted on readme? Super excited about the potential for mdx support, but wanted to start using mermaid.js in our docs as soon as we can. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants