Selkie

Language support for Mermaid diagrams in VS Code. Selkie treats Mermaid as a first-class language: syntax highlighting, completions, diagnostics, rename, and refactoring - the editor intelligence you'd expect from any well-supported language.

Selkie does not render diagrams. For preview, pair with a Mermaid preview extension such as Markdown Preview Mermaid Support.

Works in Markdown files (inside ```mermaid fences) and in standalone .mermaid and .mmd files.

Syntax highlighting

Semantic token–based highlighting powered by a Tree-sitter grammar. Token types cover node IDs, arrow operators, labels, class names, CSS properties and values, direction keywords, and comments.

Completions

Context-aware completions throughout flowchart/graph diagrams, triggered automatically as you type:

• Arrow tokens - -->, ==>, -.->, ~~~, --o, --x, &
• Node IDs and subgraph IDs - declared nodes ranked first
• Keywords - diagram type, direction, style, class, classDef, subgraph, end (context-aware: inside vs. outside a subgraph)
• Class names and node attributes (@{ shape: ..., label: ... }) - attribute keys with constrained value sets where applicable

Refactoring

Rename (F2) - rename a node ID or class name across all occurrences in the block. Node IDs update in declarations and every arrow; class names update in classDef, class assignments, and inline ::: references.

Code actions (Ctrl+.) - structural refactors available at the cursor:

• Change diagram or subgraph direction
• Convert arrow type
• Reverse arrow direction
• Flatten a subgraph
• Split & groups into individual edges
• Split a chained edge
• Change node shape

Diagnostics

Parse errors and semantic diagnostics are reported together as you type. Rules cover duplicate and reserved node IDs, invalid arrow syntax, orphan nodes, implicit nodes, annotation errors, classDef issues, cycle detection, and more - 21 distinct rules at error, warning, and hint severities. Many diagnostics come with a quick fix (Ctrl+.).

Navigation

• Go to definition (F12) - node IDs and class names
• Find references (Shift+F12) - node IDs
• Hover - label, shape, edge count, and parent subgraph for nodes; CSS body for class names
• Outline (Ctrl+Shift+O) - hierarchical view of blocks, subgraphs, and nodes
• Folding - collapse subgraph blocks in the gutter

Editor conveniences

• Pressing Enter at the end of a subgraph NAME header automatically inserts the closing end with the cursor indented inside
• Typing | immediately after an arrow inserts || and places the cursor between them - one less keystroke for A -->|label| B
• Increase and decrease arrow length from the command palette (Selkie: Increase Arrow Length / Selkie: Decrease Arrow Length)

Diagram support

Flowchart and graph diagrams (flowchart, graph) have the best support. Other diagram types receive parse error diagnostics and diagram-type completions only.

Selkie is early, and many of its refactoring actions and editor conveniences only reveal their value through real usage. If something is missing or could be better, open an issue - feedback from actual use shapes what gets built next.

Contributing