Mermaid.js Support

[garrett-wade]

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]

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]

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]

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!