https://github.com/relliv/mermaid-to-reactflow-converter

mermaidjs to reactflow converter app example
https://github.com/relliv/mermaid-to-reactflow-converter

flowchart mermaid mermaid-converter mermaidjs reactflow

Last synced: 4 months ago
JSON representation

mermaidjs to reactflow converter app example

• Host: GitHub
• URL: https://github.com/relliv/mermaid-to-reactflow-converter
• Owner: relliv
• License: mit
• Created: 2024-06-14T08:35:47.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-08-12T04:12:34.000Z (10 months ago)
• Last Synced: 2025-01-31T20:26:43.081Z (4 months ago)
• Topics: flowchart, mermaid, mermaid-converter, mermaidjs, reactflow
• Language: TypeScript
• Homepage: https://stackblitz.com/~/github.com/relliv/mermaid-to-reactflow-converter
• Size: 1.42 MB
• Stars: 17
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# mermaid to reactflow converver app

This simple application converts mermaid flow diagrams to reactflow diagrams.

> [!WARNING]  

> This is a work in progress and is not yet ready for production use.

## [⚡️ Play on StackBlitz](https://stackblitz.com/~/github.com/relliv/mermaid-to-reactflow-converter)

## 🚀 Quick Start

1. Install dependencies:

```bash

pnpm i

# or

npm i

```

2. Start the development server:

```bash

pnpm dev

# or

npm run dev

```

## 🎬 Preview

![Preview](./src/assets/images/mermaid-to-reactflow-converter-preview.gif)

## 📚 Resources

- [Mermaid](https://mermaid.js.org/): Markdown-like script language for generating charts from text via javascript.

  - [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/): An online editor for creating mermaid diagrams.

  - [Mermaid Flowcharts](https://mermaid.js.org/syntax/flowchart.html): Documentation for creating flowcharts with mermaid.

  - [Mermaid to JSON Example](https://github.com/relliv/mermaidjs-to-json-example): An example of converting mermaid diagrams to JSON (*only typescript*).

- [ReactFlow](https://reactflow.dev/): A library for building node-based graphs.

- [Monaco Editor](https://microsoft.github.io/monaco-editor/): A browser-based code editor.

  - [Monaco Editor Theme Loading](https://github.com/relliv/monaco-editor-textmate-theme-loading-example): An example of loading textmate themes for the Monaco Editor.