Loading...
Product
Core Features
Top Extensions
Company
Subscribe to our newsletter.
Get product updates and news in your inbox. No spam.
Create Mermaid diagrams from Raycast
Pele is a Raycast extension that turns Mermaid code into diagrams you can preview, copy, and export as PNG or SVG. It uses the Pele renderer locally on macOS and Windows, with bundled fonts and no API key, browser download, or Mermaid CLI setup.
Start with selected text, your clipboard, or a built-in example. Edit the source, choose a theme, and export an image for a document, presentation, or conversation. You can also ask Raycast AI to generate and save a diagram from a description.
To try a small diagram, paste this into the editor:
flowchart LR
A[Idea] --> B[Build]
B --> C{Tests pass?}
C -->|Yes| D[Ship]
C -->|No| B
Use Edit Diagram from the preview to return to the source and adjust the diagram or its appearance. Rendering errors appear in the editor, where you can correct the code and try again.
Selected text takes priority over the clipboard. If the current app does not expose its selection, or the selection is empty, the command reads the clipboard. Use Use Clipboard in the editor to replace the current source with clipboard text.
You can paste plain Mermaid code or a Markdown document containing one fenced Mermaid block:
```mermaid
flowchart LR
A[Write] --> B[Preview] --> C[Export]
```
If a document contains several Mermaid blocks, select or copy just one. YAML frontmatter inside a Mermaid block stays with the source when you edit or copy it.
Open Actions → Load Example in the editor to replace the current source with an example. Theme, resolution, and background settings stay as they are.
| Example | Content |
|---|---|
| Flowchart | A build and test workflow with a decision |
| Sequence Diagram | Requests between a user, app, and API |
| Class Diagram | Projects, tasks, properties, and methods |
| State Diagram | A draft, review, and publishing workflow |
| Entity Relationship | Customers, orders, and items |
| Pie Chart | Time spent building, planning, and reviewing |
| Sankey with Config | Electricity flows with custom node width and spacing |
| Mindmap | A launch plan grouped by team |
| Gantt Chart | Design, build, and test tasks |
The extension also accepts the other diagram types supported by its bundled Pele version. See Pele's examples for more syntax and layouts.
Include YAML frontmatter at the start of your Mermaid code to configure individual diagrams. Config works with selected text, clipboard input, Markdown fences, the editor, and Raycast AI.
The Sankey with Config example uses:
---
config:
sankey:
showValues: false
nodeWidth: 15
nodePadding: 20
---
sankey
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,Industry,342.165
Electricity grid,Losses,56.691
| Setting | Effect in this example |
|---|---|
showValues: false | Hides numeric values beside node labels |
nodeWidth: 15 | Sets each node's width to 15px |
nodePadding: 20 | Leaves 20px between nodes in the same column |
Place the frontmatter before the diagram keyword and preserve its indentation. The config applies to both PNG and SVG exports and remains in Copy Mermaid Code.
Mermaid init directives also work. This is equivalent to the config above:
%%{init: {"sankey":{"showValues":false,"nodeWidth":15,"nodePadding":20}}}%%
Place the directive before sankey and its data. Configuration support varies by diagram type. Pele uses its own layout and themes, so Mermaid theme and themeVariables colors do not apply. Choose colors with the extension's Theme selector.
The preview shows the diagram type, theme, and actual PNG dimensions. Open the Actions menu for the following options:
| Action | Result |
|---|---|
| Copy Image | Copies PNG image data for pasting into an app that accepts images |
| Edit Diagram | Returns to the source, theme, resolution, and background controls |
| Save PNG | Saves a raster image to your Save Folder |
| Save SVG | Saves a scalable vector image to your Save Folder |
| Open Full Size | Opens the preview PNG in its default application |
| Open SVG | Opens the preview SVG in its default application |
| Copy SVG Code | Copies the exported SVG markup as text |
| Copy Mermaid Code | Copies the editable Mermaid source, including its config |
| Pele Documentation | Opens the renderer's documentation |
Use PNG for apps that accept pasted images. Use SVG when you need to resize a diagram without losing detail. SVG text is converted to vector paths, so the image keeps its typography on machines without the bundled fonts. Keep a copy of the Mermaid source if you want to edit labels or structure later.
Saved files use the diagram type and a unique identifier in their filename. Each save creates a new file. The save notification includes the destination and an Open File action.
PNG resolution supports 1×, 2×, 3×, and 4×. For example, a diagram measuring 600 × 400 at its natural size produces a 1200 × 800 PNG at 2×. The preview uses the natural size independently of the export resolution.
PNG output is limited to 8,192 pixels per side and 16 megapixels. Larger images are scaled down to fit both limits. The preview metadata shows the resulting dimensions. SVG output retains the diagram's natural dimensions and scales without losing detail.
Transparent Background removes the canvas background. Node fills, labels, and lines retain their theme colors. Choose a theme that stays readable against the background where you plan to use the image.
Set defaults in the extension's Raycast preferences. You can override the theme, resolution, and transparency in the editor for the current diagram.
| Preference | Default | Options |
|---|---|---|
| Default Theme | Match Raycast | Match Raycast, Light, Dark, Flexoki Light, Flexoki Dark |
| PNG Resolution | 2× | 1×, 2×, 3×, 4× |
| Transparent Background | Off | Use a transparent canvas background |
| Save Folder | ~/Downloads/Pele | Choose a folder for exported diagrams |
Match Raycast resolves to Light or Dark when you launch the command. The default save folder is Downloads/Pele inside your home directory on either platform. The extension creates the destination folder when needed.
Mention @pele in Raycast AI and describe the diagram you want. For example:
The Generate Diagram tool accepts complete Mermaid code, an optional theme, an export format, and a transparency setting. PNG is the default format. Omitted theme and transparency settings use your preferences, and PNG resolution uses your preferred value.
The tool renders the diagram locally and saves it in your Save Folder. The AI response includes an Open Pele PNG or Open Pele SVG link to the actual rendered image. The tool also returns the file path, URL, format, diagram type, theme, and dimensions.
Raycast AI Chat cannot embed local PNG or SVG files. Its inline Mermaid blocks redraw the source with a different renderer, which can change the layout, colors, and config. The tool returns a file link instead so you view the exact Pele output. Use Create Diagram for an image preview inside Raycast.
Generating a diagram does not copy it to your clipboard or open another app. Raycast AI's normal processing applies to the prompt and tool input.
Diagrams use bundled Inter and IBM Plex Mono from Pele's example-site font stacks. Base labels are 16px, with regular, bold, and italic styles. Bundled Noto Emoji supplies monochrome emoji, including joined sequences and flags, in both PNG and SVG. The renderer measures text using the same fonts it uses for export, keeping node sizing and wrapping consistent with the output.
Pele has its own layout engine and visual style. Positions and spacing can differ from Mermaid's renderer. Explicit source styles are preserved where Pele supports them.
Characters outside the bundled fonts' coverage, such as CJK scripts and emoji newer than the bundled Noto release, may not render correctly. External images, clickable links, and custom icon resolvers are disabled. Source input is limited to 50,000 characters; Pele also enforces its own edge and SVG output limits. See Pele compatibility for renderer details.
Rendering and image export run locally. The extension does not send diagram source to an image-rendering service. Raycast AI requests use Raycast AI's normal processing before the local rendering step.
Each preview creates PNG and SVG files in the extension's support storage. Preview folders older than seven days are removed on a subsequent command launch. Open Full Size and Open SVG open these temporary files. Use Save PNG or Save SVG to keep an exported copy.
The extension retains exported files until you remove them. Preview storage is temporary and has no history browser, so keep Mermaid source separately for future edits.
| Issue | What to try |
|---|---|
| The wrong code opens | Clear the selection in the active app, or use Use Clipboard in the editor. Selected text takes priority. |
| A Markdown document is rejected | Copy one Mermaid block. Documents containing multiple Mermaid blocks need a single selection. |
| The diagram fails to render | Check the error in the editor, correct the Mermaid syntax, and verify frontmatter indentation. Use a built-in example as a starting point. |
| Config does not change the colors | Choose a theme in the editor. Mermaid themes and themeVariables colors do not apply to Pele. |
| The PNG is smaller than the requested scale | Check the dimensions in the preview. The image may have reached the pixel limits. Save an SVG for scalable output. |
| Pasting an image does not work | Paste into an app that accepts image data, or save the PNG and insert the file. Use Copy SVG Code when you need text markup. |
| Saving fails | Choose a writable Save Folder in the extension preferences, then save again. |
| Labels contain missing glyphs | Use characters covered by the bundled fonts. CJK scripts and emoji newer than the bundled Noto release are unavailable. |
From the extension directory, install dependencies and start Raycast development mode:
npm install
npm run dev
Run the checks with:
npm test
npm run typecheck
npm run lint
npm run build
npx ray evals
Tests exercise the real Pele and WebAssembly renderers, including fallback font metrics and emoji outlines, SVG theming, PNG pixels, all bundled examples, frontmatter and init config, source selection, image limits, exports, and preview cleanup. AI evals use synthetic mocks and require Raycast authentication.
For manual checks on macOS and Windows, render selected and clipboard code, load an example, edit its config, change theme and transparency, paste a copied image into an image-aware app, and save and open both formats. Verify that malformed input remains editable. Windows image copying uses the built-in Windows PowerShell and .NET clipboard APIs.
The pinned @resvg/resvg-wasm package must match assets/resvg.wasm. When updating it, copy node_modules/@resvg/resvg-wasm/index_bg.wasm to that asset and run the rendering tests.
assets/licenses.assets/licenses/NotoEmoji-OFL.txt.This is an independent Raycast extension, not an official Obsidian product.
Render Mermaid code from selected text or the clipboard, or write a diagram with themes and PNG or SVG export.