[AdiRishi]

Requested by Adi · project thread

Before: code inside a ```mermaid fence in the editor was plain text, while ```ts and other fences were highlighted.

After: Mermaid fences (and ```mmd) are highlighted with the editor's existing palette: diagram types and keywords in purple, directions and numbers in orange, node labels, edge labels and messages in green, arrows in proof red, comments in italic grey, %%{init}%% directives muted, and classDef/style lines with property names and colors picked out.

@codemirror/language-data ships no Mermaid grammar, so this adds a small stream tokenizer (src/features/editor/mermaid.ts) that covers what every diagram type shares rather than a full grammar per diagram type.

How: the tokenizer is registered as a LanguageDescription ahead of languages in codeLanguages, and is loaded lazily with the first Mermaid fence. Arrows get their own tag (t.special(t.operator)), so operators in other languages are unchanged. The preview never shows Mermaid source as code (it renders the diagram), so nothing changes there. Tests in mermaid.test.ts cover flowcharts, sequence messages, arrows across diagram types, comments, directives, style lines and pie values.

🤖 Generated with Claude Code

https://claude.ai/code/session_015T2MmivwEhojpAYHAyCvtQ

---

Generated by Claude Code

Summary by CodeRabbit

• New Features
  • Added syntax highlighting for Mermaid diagrams in fenced code blocks, including mermaid and mmd language tags.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: b62933ea-c61e-487e-ae5a-2c2a759b67b6

---

📥 Commits

Reviewing files that changed from the base of the PR and between 49abf87 and 6ddc696.

---

📒 Files selected for processing (3)

• src/features/editor/extensions.ts
• src/features/editor/mermaid.test.ts
• src/features/editor/mermaid.ts

---

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

---

📝 Walkthrough

Walkthrough

The editor adds a CodeMirror stream parser for Mermaid syntax and registers it for Markdown code fences labeled mmd or mermaid. Tests cover tokenization of several Mermaid diagram constructs.

Changes

Mermaid editor support

Layer / File(s)	Summary
Mermaid tokenization src/features/editor/mermaid.ts, src/features/editor/mermaid.test.ts	The parser defines Mermaid syntax tokens and state, and exports the language and parser. Tests cover flowcharts, sequence messages, arrows, directives, comments, styles, and pie diagrams.
Mermaid code-fence registration src/features/editor/extensions.ts	The editor adds a language description for the mmd and mermaid aliases. It dynamically loads the Mermaid language and places it before the built-in languages for Markdown code fences.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant MarkdownCodeFences
  participant MermaidLanguageDescription
  participant MermaidModule
  MarkdownCodeFences->>MermaidLanguageDescription: resolve mmd or mermaid
  MermaidLanguageDescription->>MermaidModule: dynamically import ./mermaid
  MermaidModule-->>MermaidLanguageDescription: provide mermaidLanguage
  MermaidLanguageDescription-->>MarkdownCodeFences: return LanguageSupport

Loading

---

Merge Risk: ⚪ Minimal · up to 6ddc6

No actionable issue remains from the reviewed changes; the PR is mergeable after normal checks.

Pre-merge checks | 4 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: adding Mermaid fence highlighting to the editor.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

---

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🚀 Preview Deployment Ready!

Application	Preview URL	Status
Render MD	Visit Preview	✅ Ready