A modern Next.js application for viewing and editing Markdown content with Mermaid diagram support, optimized for Bun.
- Markdown Editor: Rich text editing with syntax highlighting
- Mermaid Diagrams: Support for various diagram types (flowcharts, sequence diagrams, class diagrams, etc.)
- Real-time Preview: Split-view editing with live preview
- Responsive Design: Mobile-friendly interface
- Theme Support: Light/dark mode toggle
- File Import/Export: Save and load your Markdown files
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Runtime: Bun (optimized)
- Styling: Tailwind CSS
- UI Components: Radix UI + shadcn/ui
- Markdown: Marked.js with custom Mermaid processing
- Diagrams: Mermaid.js
-
Install Bun: Make sure you have Bun installed
curl -fsSL https://bun.sh/install | bash
-
Verify Installation:
-
Install Dependencies:
-
Start Development Server:
-
Open Browser: Navigate to http://localhost:3000
-
Build the Application:
-
Start Production Server:
- bun run dev - Start development server with Turbopack
- bun run build - Build for production
- bun run start - Start production server
- bun run lint - Run ESLint
- bun run type-check - Run TypeScript type checking
- bun run clean - Clean build artifacts
- bun run install-deps - Install dependencies using Bun
src/
├── app/ # Next.js App Router pages
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── doc-viewer.tsx # Document viewer component
│ ├── docs-sidebar.tsx # Documentation sidebar
│ ├── markdown-editor.tsx # Markdown editor
│ └── markdown-viewer.tsx # Markdown renderer with Mermaid
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
└── actions/ # Server actions
The application supports various Mermaid diagram types:
- Flowcharts: graph TD, flowchart LR
- Sequence Diagrams: sequenceDiagram
- Class Diagrams: classDiagram
- Gantt Charts: gantt
- And more...
```mermaid
graph TD
A[Start] --> B{Decision?}
B -->|Yes| C[Continue]
B -->|No| D[Stop]
- bunfig.toml - Bun configuration
- .bunrc - Additional Bun runtime settings
- next.config.ts - Next.js configuration
- tsconfig.json - TypeScript configuration
- Faster Package Installation: Significantly faster than npm/yarn
- Improved Build Performance: Better TypeScript compilation
- Memory Efficiency: Lower memory usage during development
- Native TypeScript Support: Built-in TypeScript support
- Full Compatibility: Works with existing Node.js ecosystem
- Fork the repository
- Create a feature branch
- Make your changes
- Run tests and type checking
- Submit a pull request
This project is open source and available under the MIT License.