Storybook: Support Mermaid Graphs

[de-dan]

Is your feature request related to a problem? Please describe.
I'm using Storybook to display my web-components built with stencil. Stencil autogenerates Readme-markdown files, which I can display via the notes addon.

As of Stencil-One it generates graph-data using mermaid, as far as I can see. It would be great, if the addon can display these graphs.

Describe the solution you'd like
Support mermaid graphs in markdown files.

[chris-dura]

I am doing the same thing, I wasn't familiar with mermaid, until I started seeing it in the stencil readmes... it's very cool, and any of the addons like Notes or Info that already support Markdown should be able to layer in MermaidJS rendering 🤷‍♀

[shilman]

Pretty cool. Might add it as doc block, see: https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a

[knsv]

I am the author of mermaid. Let me know if you need any assistance from me. As a happy user of storybook I would love to see mermaid support here.

[shilman]

@knsv It looks like an awesome library -- thanks for offering to help. Will reach out soon to discuss! 🥇

[shilman]

Hey @de-dan @knsv sorry to let this go cold. Been hustling on the first Docs release and that's finally starting to look pretty good: https://medium.com/storybookjs/storybook-docspage-e185bc3622bf

I have some ideas here and will follow up soon!

[vidarc]

curious if there has been any movement on this? storybook 5.3 is great and this would make it even better.

https://stenciljs.com/ uses mermaid graphs in their automatic doc generation. example of how they do it:

### Graph
```mermaid
graph TD;
  cx-disclosure-dialog --> cx-dialog
  cx-workflow-activities --> cx-dialog
  style cx-dialog fill:#f9f,stroke:#333,stroke-width:4px
\```

used to use https://www.npmjs.com/package/markdown-it to accomplish the parsing.

[Shackless]

Any news on this?

[shilman]

Other docs features need more attention, so I have not prioritized this yet. PRs are welcome!

[shilman]

@knsv i've implemented a POC version of this. do you have 15m to discuss a few details of its release in SB6.0? if so, mind jumping on the storybook discord? https://discord.gg/UUt2PJb

[knsv]

Sure @shilman. I just joined. Lets make an appointment :)

[logankoester]

This looks interesting: https://www.npmjs.com/package/@shedali/remark-mermaid

[scottjoe1996]

@shilman could you share this POC? I'm trying to get it to work in my stencil/storybook project and would really appreciate any help

[shilman]

@scottjoe1996 sorry, i've gotten stuck on another project. will try to publish something in the next week.

[scottjoe1996]

Cheers! Whenever you have free time

Sent from my iPhone

On 16 Apr 2020, at 00:54, Michael Shilman [e-mail] wrote:


@scottjoe1996 sorry, i've gotten stuck on another project. will try to publish something in the next week.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[Dorkside]

Hey, any news on how this might be going ? It would be nice to have a streamlined solution for this :+1:

[shilman]

haven't been able to work on this in months. this is what i have so far:

going to work with @yannbf and @knsv to get it shipped

[Dorkside]

Great, seems good enough for basic usage.
I'm trying to use it with @storybook/web-components right now.
Was able to show it inside a CSF story, but having issues doing the same from mdx.

TypeError: Cannot read property 'fromId' of undefined

From what I gathered this seems to be a configuration problem, so trying to solve it first.
Keep us posted for this integration :+1:

[maneetgoyal]

Hi all, any updates on this? Looking forward to when it lands. Pretty cool addition.