feat: add support for mermaid diagrams in markdown

[j-h-a]

Description

This change adds support to include mermaid diagrams directly in any markdown.

Related issue(s)

Fixes #712

[j-h-a]

I'm not a React or JS/TS developer so I'm not sure about best practices or good patterns to use here - I'd appreciate some feedback on the following things, so that I can make this better before taking it out of draft:

1. Is there a better approach/pattern that using a global boolean to track if mermaid.js is included yet?
2. Testing: I don't know how to do testing in React, can anyone help me or point me in the right direction. I'd suggest the following tests:

• The mermaid <script> is included exactly once when one ```mermaid code-section is present in the markdown.
• The mermaid <script> is included exactly once when multiple ```mermaid code-sections are present in the markdown.
• The mermaid <script> is not included when no ```mermaid code-sections are present in the markdown.
• When language (the bit after ```) is mermaid, then a <pre class="mermaid"> section is inserted instead of a <code> section.
• When language is not mermaid then it uses a <code> section instead.

[derberg]

@j-h-a thanks for that PR 🍺 and sorry again for huge delay 😞

Just to clarify, we are not using makrdown-it in react component but marked. Just keep in mind for future that in the main library we can only use libraries that are explicitly defined as dependencies -> https://github.com/asyncapi/asyncapi-react/blob/next/library/package.json#L70-L79. I think you just looked into master first.

It is the same with mermaid. I assume you've hacked it this way with global variable and dynamic script addition to not add to much more KB to bundled JS files. The problem is that this way we do not control mermaid version through package.json and will not get any potential automated dependabot updates of patch security fixes.

• please just install mermaid package in library folder
• just import it as any other extenral library inside marked.ts
• adjust your code a little bit to match new setup
• instead of making sure the script is there already, rather make sure mermaid was already initialized once and do not need to be initialized.
• you have some code for inspiration in https://github.com/asyncapi/website/blob/master/components/MDX.js

After refactor you can check the size of bundled JS file and I bet it did not increase too much.

---

Regarding tests, we have simple tests and in case of your change just add a test case to https://github.com/asyncapi/asyncapi-react/blob/next/library/src/helpers/__tests__/marked.test.ts called should render mermaid diagram.

---

Some magic in tailwind configuration has to probably be introduced as by default the background of the diagram should be white. I think now default background for pre tags is applied

---

Also would make sense to mention somewhere in the readme support for mermaid

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

[jonaslagoni]

Just left some suggestions 🙂 They are rough code suggestion, you might need to alter them slightly and add some dependencies.

[jonaslagoni]

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} />;

[jonaslagoni]

Remove this.

[jonaslagoni]

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.

[github-actions]

This pull request has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this pull request, add a comment with detailed explanation.

There can be many reasons why some specific pull request has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this pull request forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[derberg]

next will soon be deleted. It is already merged into master and 1.0 is now available.

no more long living release branches!

sorry for any trouble with your PR 😞 but we really had to finally release this v1 and get rid of release branch

I close this PR as I think it is better for you to recreate a new fresh PR targeting master. Feel free to drop a comment if you disagree and I will reopen ☮️