← All work
Dev tools

Mermaid to Shadcn

Turns Mermaid diagrams into shadcn/ui React components.

Category
Category

Modular Architecture: Investigating the benefits of component isolation in mermaid-to-shadcn.

Overview

Mermaid to Shadcn is a specialized React component library designed to bridge the gap between static diagrams and interactive UI components. It parses Markdown content and intelligently renders shadcn/ui charts, with a robust fallback to Mermaid diagrams for unsupported structures.

Core Concepts

This project focuses on the modular implementation of mermaid to shadcn, emphasizing clean separation of concerns and maintainable pattern design.

Implementation notes

  • Runtime: Node.js-based web project.
  • UI: Component library lives under components/.
  • Tooling: npm scripts available (analyze, build, clean, dev, lint, prepublishOnly, test, test:coverage…).
  • Entry points: src/index.ts.

Technology Stack

  • Root: React, TypeScript, Jest, Node.js

Getting Started

npm install
npm run dev

Scripts

analyze: npm run build && open dist/bundle-analysis.html
build: rollup -c
clean: rimraf dist
dev: rollup -c -w
lint: eslint src --ext .ts,.tsx
prepublishOnly: npm run clean && npm run build
test: jest
test:coverage: jest --coverage
test:watch: jest --watch
type-check: tsc --noEmit

Repository Layout

  • app/
  • components/
  • demo/
  • examples/
  • src/

Configuration

No required environment variables were detected (no .env*.example found).

Notes

  • Keep this README factual and repository-grounded.