Feat/mermaid to thinkix

[Kripu77]

Summary by CodeRabbit

Release Notes

• New Features
  • Added Mermaid diagram-to-board conversion with live preview and diagram type support (flowchart, sequence, class).
  • Added "Mermaid to Board" menu item with preset diagram examples and keyboard shortcut support (Cmd/Ctrl+Enter).
  • Integrated diagram parsing with real-time element preview and error handling for unsupported syntax.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
thinkix	Ready	Preview, Comment	Mar 10, 2026 2:05am

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR introduces comprehensive Mermaid diagram support by adding a new @thinkix/mermaid-to-thinkix package that parses multiple Mermaid diagram types into Plait board elements. It includes a modal dialog component with live preview, error handling, diagram presets, and insertion workflow, alongside extensive utilities for SVG parsing, geometry extraction, and element transformation.

Changes

Cohort / File(s)	Summary
New Mermaid-to-Thinkix Package packages/mermaid-to-thinkix/src/*, packages/mermaid-to-thinkix/package.json, packages/mermaid-to-thinkix/tsconfig.json	Complete new package exporting types, constants, utilities, DOM guards, SVG edge parsing, Mermaid diagram parsers (flowchart, sequence, class), transformers to Plait elements, and comprehensive test coverage. Includes configuration for ESM module, TypeScript support, and build/test scripts.
Dialog Integration features/dialogs/components/MermaidToBoardDialog.tsx, features/dialogs/index.ts, features/dialogs/index.tsx, features/toolbar/components/AppMenu.tsx	New MermaidToBoardDialog React component with debounced parsing, live preview, diagram presets, error handling, and insertion workflow. Exports component, icon, and toolbar integration with menu item and state management.
Test Infrastructure tests/__mocks__/setup.mts, tests/__utils__/test-utils.ts, tests/unit/mermaid-*.test.ts, tests/components/MermaidToBoardDialog.test.tsx, tests/components/collaboration-start-dialog.test.tsx	Comprehensive test suite including unit tests for parsers, transformers, utilities; component tests for dialog; mock setup for mermaid, dompurify, Plait; and test utilities for SVG mock elements and Mermaid data builders.
Configuration & Build .gitignore, eslint.config.mjs, next.config.ts, tsconfig.json, vitest.config.mts	Updated configs: transpile new package, add turbopack root, ESLint rules for package, path aliases for imports, expanded vitest test patterns, .serena directory ignore.
Existing Code Updates features/board/utils/insertion.ts	Added logging to error handling in getSafeInsertPosition with logger initialization.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Dialog as MermaidToBoardDialog
    participant Parser as parseMermaidDiagram
    participant Transformer as transformToBoard
    participant Board as Plait Board
    participant Insertion as insertElementsSafely

    User->>Dialog: Open dialog & enter Mermaid syntax
    Dialog->>Dialog: Debounce (500ms)
    Dialog->>Parser: Parse diagram definition
    Parser->>Parser: Detect type & route parser<br/>(flowchart/sequence/class)
    Parser->>Parser: Extract geometry from SVG
    Parser-->>Dialog: MermaidDiagramData
    Dialog->>Transformer: Transform diagram data
    Transformer->>Transformer: Convert to Plait elements<br/>(containers, arrows, text)
    Transformer-->>Dialog: MermaidToBoardResult
    Dialog->>Board: Render preview with elements
    Board-->>Dialog: Display live preview
    User->>Dialog: Click Insert to Board
    Dialog->>Insertion: insertElementsSafely(elements)
    Insertion->>Board: Add elements to active board
    Board-->>User: Elements inserted
    Dialog->>Dialog: Log event & close

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Feat/md to mindmap #14 — Modifies the same features/board/utils/insertion.ts file to enhance error handling and logging that this PR depends upon.
• Arch/improv code coverage #12 — Updates vitest.config.mts to register the @thinkix/mermaid-to-thinkix module alias and test configuration, directly related to package setup.
• Feature/responsive toolbar palm rejection #15 — Modifies features/toolbar/components/AppMenu.tsx to integrate UI components and state management for diagram features in the same toolbar.

Poem

🐰 A Mermaid arrives with diagrams grand,

Parsed from SVG to board-element land,

With sequence and flowcharts all dancing about,

Transform them to Plait, and render with clout! ✨

— The CodeRabbit Poet

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 7.41% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main feature being added: Mermaid diagram-to-Thinkix board conversion functionality, which aligns with the substantial new package and integration work throughout the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/mermaid-to-thinkix

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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 and usage tips.}

[github-actions]

❌ Test Results

Metric	Coverage
Lines	0%
Functions	64.96%
Branches	41.96%
Statements	54.25%
Average	40.3%

📦 Download Coverage Report

How to view coverage report

1. Download the coverage artifact from the link above
2. Extract the ZIP file
3. Open index.html in your browser

---

Commit: ae5940ef2267b7cf01fd633d695463a1f8ebec14