#Diagrams

React Full supports mermaid and mindmap code blocks out of the box. Pele renders Mermaid syntax as flowcharts, sequence diagrams, mind maps, and more, following the component's light or dark theme.

#Get started

Install fluxdown and pass labeled code blocks as ordinary Markdown:

import { Fluxdown } from 'fluxdown';

const markdown = [
  '```mermaid',
  'flowchart LR',
  '  A[Idea] --> B[Build] --> C[Share]',
  '```',
  '',
  '```mindmap',
  'mindmap',
  '  Project',
  '    Content',
  '      Markdown',
  '      Diagrams',
  '    Experience',
  '      Streaming',
  '```',
].join('\n');

export function Message() {
  return <Fluxdown text={markdown} />;
}

Pele loads on demand, showing source during the initial load. No separate diagram stylesheet import is needed. The previous diagram stays visible during edits, and incomplete syntax keeps the last valid diagram visible.

SVGs scale to fit their container. Pele supports Mermaid 12.1's built-in diagram types, with layouts that differ from Mermaid. External plugins and Mermaid themes are not supported. See Pele compatibility.

#Mermaid flowcharts

Set the code block language to mermaid and write Mermaid syntax. Edit the source below to see the result:

flowchart TD
  A[Receive Markdown] --> B{Content type}
  B -->|mermaid| C[Flowchart]
  B -->|mindmap| D[Mind map]
  C --> E[Ready to read]
  D --> E

#Mind maps

Set the code block language to mindmap, start the content with mindmap, and indent nodes to describe the hierarchy:

mindmap
  A good reading experience
    Content
      Markdown
      Diagrams and math
    Experience
      Smooth streaming
      Light and dark themes

#Add diagrams to React Lite

React Lite displays the source of these code blocks by default. Install @fluxdown/react-plugins and add CodePelePlugin:

import { CodePelePlugin } from '@fluxdown/react-plugins/plugins/code-pele';
import { FluxdownLite } from 'fluxdown/lite';

const plugins = [CodePelePlugin];

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <FluxdownLite plugins={plugins} text={text} />;
}

CodePelePlugin handles both mermaid and mindmap code blocks. Both require the diagram type declaration, such as flowchart or mindmap, in the source. See Plugin matrix for preset and dependency choices.