> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mermaid-js/mermaid/llms.txt
> Use this file to discover all available pages before exploring further.
# Quickstart
> Create your first Mermaid diagram in under 5 minutes
# Quickstart
This guide will help you create and render your first Mermaid diagram. You'll learn the basic workflow for integrating Mermaid into your project.
## Step 1: Install Mermaid
First, install Mermaid in your project:
```bash npm theme={null}
npm install mermaid
```
```bash yarn theme={null}
yarn add mermaid
```
```bash pnpm theme={null}
pnpm add mermaid
```
Alternatively, you can use the CDN approach if you want to skip the installation. See the [installation guide](/installation#cdn) for details.
## Step 2: Create your HTML file
Create an HTML file with a div element that will contain your diagram. Use the class `mermaid` to mark elements for automatic rendering:
```html index.html theme={null}
My First Mermaid Diagram
My First Mermaid Diagram
graph LR
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Check the console]
C --> E[End]
D --> E[End]
```
The `mermaid.initialize()` function configures Mermaid. Setting `startOnLoad: true` tells Mermaid to automatically render all diagrams when the page loads.
## Step 3: Initialize and render
If you're using Mermaid in a JavaScript application, here's how to initialize and render diagrams programmatically:
Import the Mermaid library in your JavaScript file:
```javascript app.js theme={null}
import mermaid from 'mermaid';
```
Configure Mermaid with the `initialize()` function. This should be done before rendering:
```javascript app.js theme={null}
mermaid.initialize({
startOnLoad: true,
theme: 'default',
logLevel: 'error',
});
```
Common configuration options:
* `startOnLoad`: Automatically render diagrams on page load (default: `true`)
* `theme`: Visual theme (`'default'`, `'dark'`, `'forest'`, `'neutral'`)
* `logLevel`: Console logging level (`'debug'`, `'info'`, `'warn'`, `'error'`, `'fatal'`)
For automatic rendering, Mermaid will find all elements with the class `mermaid` and render them:
```javascript app.js theme={null}
// This happens automatically when startOnLoad is true
await mermaid.run();
```
For manual rendering of a specific diagram:
```javascript app.js theme={null}
const element = document.querySelector('#myDiagram');
const graphDefinition = `
graph TB
A[Start] --> B[Process]
B --> C[End]
`;
const { svg, bindFunctions } = await mermaid.render('graphDiv', graphDefinition);
element.innerHTML = svg;
// Bind any interactive functions (e.g., click handlers)
if (bindFunctions) {
bindFunctions(element);
}
```
Open your HTML file in a browser. You should see your diagram rendered!
## Example: Complete application
Here's a complete example showing different ways to use Mermaid:
```html complete-example.html theme={null}
Mermaid Examples
Mermaid Diagram Examples
Sequence Diagram
sequenceDiagram
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Flowchart
```
## Common patterns
### Parsing diagrams
Validate diagram syntax without rendering:
```javascript theme={null}
const diagramText = 'graph TD\n A-->B';
try {
const result = await mermaid.parse(diagramText);
console.log('Valid diagram:', result.diagramType);
// Output: { diagramType: 'flowchart-v2' }
} catch (error) {
console.error('Invalid diagram:', error);
}
```
### Error handling
Handle rendering errors gracefully:
```javascript theme={null}
await mermaid.run({
querySelector: '.mermaid',
suppressErrors: true, // Don't throw errors, just log them
postRenderCallback: (id) => {
console.log('Rendered diagram:', id);
}
});
```
### Detecting diagram types
```javascript theme={null}
const diagramText = 'sequenceDiagram\n Alice->>Bob: Hello';
const type = await mermaid.detectType(diagramText);
console.log(type); // 'sequence'
```
## Next steps
Now that you've created your first diagram, explore more advanced topics:
Learn the syntax for different diagram types
Customize themes, styling, and behavior
Explore the complete Mermaid API
Browse real-world diagram examples
Try the [Mermaid Live Editor](https://mermaid.live/) to experiment with different diagram types and see the results in real-time.