Mermaid to FigJam

About this plugin

## ✨ New Features

### FigJam → Mermaid Conversion

- **Section-based conversion**: Select any FigJam Section and convert all flowchart elements within it to Mermaid code

- **Smart node mapping**: Automatically generates clean, sequential node IDs (A, B, C... AA, AB... for 26+ nodes)

- **Shape recognition**: Correctly identifies rectangles, diamonds, and circles from FigJam shapes

- **Connection preservation**: Maintains all connections with labels and arrow types

- **Large diagram support**: Handles flowcharts with 100+ nodes efficiently

### Enhanced UI/UX

- **Dynamic button states**: FigJam → Mermaid button is enabled only when a Section is selected

- **Improved UI layout**: Cleaner interface with Sample Flowchart and Clear links

- **Real-time feedback**: Clear status messages for successful conversions

- **Bilingual support**: Works seamlessly with both English and Japanese text

### Technical Improvements

- **Robust error handling**: Graceful handling of edge cases and missing connections

- **Performance optimizations**: Efficient processing of large diagrams

- **Debug logging**: Comprehensive logging for troubleshooting (in development mode)

## 🔄 Conversion Capabilities

### Mermaid → FigJam (Enhanced)

- Automatic Section creation with timestamp

- Optimized layout algorithm with branch/merge point detection

- Smart connector routing to minimize overlaps

- Support for all Mermaid node shapes and connection types

### FigJam → Mermaid (New)

- Clean Mermaid code generation

- Preserves flowchart structure and logic

- Handles complex branching and merging patterns

- Maintains connection labels and directionality

## 📋 Usage

1. **Mermaid → FigJam**: Paste your Mermaid code and click convert

2. **FigJam → Mermaid**: Select a Section containing your flowchart and click convert

3. **Sample Flowchart**: Click to insert a sample Mermaid diagram

4. **Clear**: Reset the text area for new input

## 🛠️ Technical Details

- **Node ID Generation**: Intelligent mapping system supporting unlimited nodes

- **Shape Mapping**: FigJam shapes are correctly interpreted as Mermaid syntax

- **Section Detection**: Automatic detection of selected Sections for conversion

- **Color Scheme**: Light blue nodes (#C2E5FF) with blue connectors (#3DADFF)

## 🐛 Bug Fixes

- Fixed node positioning issues within Sections

- Resolved connector overlap problems in complex diagrams

- Corrected shape detection for rounded rectangles

- Fixed text encoding issues for Japanese characters

## 🔧 Requirements

- FigJam (Figma) desktop or web application

- Sections must be used for FigJam → Mermaid conversion

## 🚀 Getting Started

1. Install the plugin in FigJam

2. Try the Sample Flowchart to see the conversion in action

3. Use your own Mermaid code or convert existing FigJam diagrams

---

**Note**: This plugin is designed to work with standard flowchart patterns. Complex FigJam designs with custom shapes or annotations may not convert perfectly to Mermaid syntax.