MD Viewer includes built-in support for Mermaid diagrams, allowing you to create flowcharts, sequence diagrams, class diagrams, and more directly in your markdown files.
How to use
Create Mermaid diagrams using code fences with the mermaid language identifier:
```mermaid
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug]
D --> B
```
src/components/MarkdownRenderer.jsx
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
code({node, inline, className, children, ...props}) {
const match = /language-(\w+)/.exec(className || '');
if (!inline && match && match[1] === 'mermaid') {
return <Mermaid chart={String(children).replace(/\n$/, '')} />;
}
return <code className={className} {...props}>{children}</code>;
}
}}
>
{content}
</ReactMarkdown>
Implementation
The Mermaid component handles diagram rendering with proper error handling.
Initialization
Mermaid is initialized with a dark theme and secure settings:
src/components/Mermaid.jsx
import mermaid from 'mermaid';
mermaid.initialize({
startOnLoad: false,
theme: 'dark',
securityLevel: 'loose',
});
The startOnLoad: false setting gives us control over when diagrams are rendered, allowing for better error handling and performance.
Rendering
The component uses React hooks to render diagrams asynchronously:
src/components/Mermaid.jsx
export default function Mermaid({ chart }) {
const containerRef = useRef(null);
const [svgContent, setSvgContent] = useState('');
const [error, setError] = useState(false);
useEffect(() => {
let isMounted = true;
const renderChart = async () => {
try {
setError(false);
const id = `mermaid-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
const { svg } = await mermaid.render(id, chart);
if (isMounted) {
setSvgContent(svg);
}
} catch (err) {
console.error("Mermaid generation error", err);
if (isMounted) {
setError(true);
}
}
};
if (chart) {
renderChart();
}
return () => {
isMounted = false;
};
}, [chart]);
return (
<div
className="mermaid-container"
ref={containerRef}
dangerouslySetInnerHTML={{ __html: svgContent }}
style={{ display: 'flex', justifyContent: 'center', margin: '20px 0' }}
/>
);
}
Unique IDs
Each diagram gets a unique ID to prevent conflicts when multiple diagrams are rendered:
src/components/Mermaid.jsx
const id = `mermaid-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
Example diagrams
Here are some common diagram types you can create:
Flowchart
Sequence diagram
Class diagram
State diagram
```mermaid
graph LR
A[Square Rect] --> B((Circle))
A --> C(Rounded Rect)
B --> D{Rhombus}
C --> D
```
```mermaid
sequenceDiagram
participant A as Alice
participant B as Bob
A->>B: Hello Bob, how are you?
B->>A: Great!
```
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +String gender
class Duck{
+String beakColor
+swim()
}
class Fish{
-int sizeInFeet
-canEat()
}
```
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
Error handling
When a Mermaid diagram has syntax errors, the component displays a clear error message:
src/components/Mermaid.jsx
if (error) {
return (
<div
className="mermaid-error"
style={{
color: 'red',
padding: '10px',
border: '1px solid red',
borderRadius: '4px'
}}
>
Found syntax error in Mermaid diagram.
</div>
);
}
Mermaid syntax errors will prevent the diagram from rendering. Check the browser console for detailed error messages.
Styling
Diagrams are centered and given vertical spacing:
src/components/Mermaid.jsx
<div
className="mermaid-container"
ref={containerRef}
dangerouslySetInnerHTML={{ __html: svgContent }}
style={{ display: 'flex', justifyContent: 'center', margin: '20px 0' }}
/>
Supported diagram types
MD Viewer supports all Mermaid diagram types through the mermaid library (version 11.12.3):
- Flowcharts
- Sequence diagrams
- Class diagrams
- State diagrams
- Entity relationship diagrams
- User journey diagrams
- Gantt charts
- Pie charts
- Git graphs
- And more
Refer to the Mermaid documentation for complete syntax guides.
The component includes several performance optimizations:
Async rendering
Diagrams are rendered asynchronously to prevent blocking the UI:
src/components/Mermaid.jsx
const renderChart = async () => {
try {
setError(false);
const id = `mermaid-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
const { svg } = await mermaid.render(id, chart);
if (isMounted) {
setSvgContent(svg);
}
} catch (err) {
console.error("Mermaid generation error", err);
if (isMounted) {
setError(true);
}
}
};
Cleanup
The component properly cleans up when unmounted:
src/components/Mermaid.jsx
useEffect(() => {
let isMounted = true;
// ... rendering logic
return () => {
isMounted = false;
};
}, [chart]);
Dependencies
Mermaid support requires the following package:
{
"dependencies": {
"mermaid": "^11.12.3"
}
}