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.

Sign up for GitHub

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

feat: add support for mermaid diagrams in markdown #715

Closed
wants to merge 2 commits into from
Closed

feat: add support for mermaid diagrams in markdown #715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e2fd448
feat: Add support for mermaid diagrams in markdown (#712)
j-h-a Apr 12, 2023
1a7e26f
wip: try to include mermaid script in the code instead of adding a sc…
j-h-a May 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
"highlight.js": "^10.7.2",
"isomorphic-dompurify": "^0.13.0",
"marked": "^4.0.14",
"mermaid": "^9.3.0",
"openapi-sampler": "^1.2.1",
"use-resize-observer": "^8.0.0"
},
Expand Down
14 changes: 12 additions & 2 deletions library/src/helpers/marked.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { marked } from 'marked';
import { initializeMermaidOnce } from './mermaid';

// @ts-ignore
import hljs from 'highlight.js/lib/core';
Expand All @@ -15,7 +16,7 @@ hljs.registerLanguage('yaml', yaml);
import bash from 'highlight.js/lib/languages/bash';
hljs.registerLanguage('bash', bash);

Copy link
Member

@jonaslagoni jonaslagoni May 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Globally inline everything, just as the website does it:

Suggested change
let mermaidInitialized = false;
initializeMermaid();
function initializeMermaid() {
if (mermaidInitialized) {
return;
}
mermaidInitialized = true;
mermaid.initialize({
startOnLoad: true,
theme: "base",
securityLevel: "loose",
themeCSS: ``,
themeVariables: {
primaryColor: "#EDFAFF",
primaryBorderColor: "#47BCEE",
secondaryColor: "#F4EFFC",
secondaryBorderColor: "#875AE2",
fontFamily: "Inter, sans-serif",
fontSize: "18px",
primaryTextColor: "#242929",
tertiaryColor: "#F7F9FA",
tertiaryBorderColor: "#BFC6C7"
}
});
}

This will most likely remove the error you have, about re-exporting mermaid from the initializeMermaidOnce.

const markedOptions: marked.MarkedOptions = {
const codeHighlightOptions: marked.MarkedOptions = {
langPrefix: 'hljs language-',
highlight: (code, language) => {
if (!hljs.getLanguage(language)) {
Expand All @@ -28,9 +29,18 @@ const markedOptions: marked.MarkedOptions = {
}
},
};
const codeHighlightRenderer = new marked.Renderer(codeHighlightOptions);
const markdownRenderer = new marked.Renderer();
markdownRenderer.code = (code, language, isEscaped) => {
if (language === 'mermaid') {
initializeMermaidOnce();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this.

return '<pre class="mermaid">' + code + '</pre>';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dont you need to return the rendered mermaid diagram here? i.e. add this from the website:

let currentId = 0;
const uuid = () => `mermaid-${(currentId++).toString()}`;
function MermaidDiagram({ graph }) {
  const [svg, setSvg] = useState(null);

  useLayoutEffect(() => {
    if (!graph) {
      return;
    }

    try {
      mermaid.mermaidAPI.render(uuid(), graph, renderedSvg => setSvg(renderedSvg));
    } catch (e) {
      setHtml(null)
      console.error(e);
    }
  }, [graph]);

  return svg ? <div dangerouslySetInnerHTML={{ __html: svg }} /> : null;
}

And then do the following:

Suggested change
return '<pre class="mermaid">' + code + '</pre>';
return <MermaidDiagram graph={code} />;

}
return codeHighlightRenderer.code(code, language, isEscaped);
};

export function renderMarkdown(content: string): string {
return marked(content, markedOptions);
return marked(content, { renderer: markdownRenderer });
}

export { hljs };
16 changes: 16 additions & 0 deletions library/src/helpers/mermaid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import mermaid from 'mermaid';

var mermaidInitialized = false;
export function initializeMermaidOnce() {
if (mermaidInitialized) {
return;
}
mermaidInitialized = true;

// This breaks the build for some reason 🤷‍♂️
// Here's the super-useful error that truly makes sense:
// Can't reexport the named export 'o' from non EcmaScript module (only default export is available)
mermaid.initialize({
startOnLoad: true,
});
}
9 changes: 9 additions & 0 deletions playground/src/specs/streetlights.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,15 @@ info:
* Dim a specific streetlight 😎
* Receive real-time information about environmental lighting conditions 📈

### We got mermaids 🧜‍♀️

\`\`\`mermaid
graph LR
Mermaid --> Graph --> Looks --> Cool
Graph --> Works["Works!"]
Works --> Cool
\`\`\`

termsOfService: http://asyncapi.org/terms/
contact:
name: API Support
Expand Down