Can I use mermaid.js?

[mcauto]

I want to use mermaid diagram in description of openapi.yaml

https://mermaid-js.github.io/mermaid/#/./n00b-gettingStarted

[char0n]

@mcauto unfortunately you cannot. SwaggerUI uses https://www.npmjs.com/package/remarkable which only supports CommonMark as mandated by OpenAPI specification.

SwaggerUI is plugginable system thought, thus it should be possible to create plugin that overrides how MarkDown is rendered.

[mathis-m]

@mcauto you would just need to override the Markdown component as shown here under the components segment.
Just use the source argument that gets passed to the component and render it using react-mermaid2:

import React from "react"
import Mermaid from "react-mermaid2"

const CustomMarkdown: React.FC<{ source: string }> = ({source}) => {
  return (
    <Mermaid chart={source} />
  );
};

export default React.memo(CustomMarkdown);