React Flow → mxGraph Conversion Tester

Test the conversion from React Flow JSON structure to mxGraph XML format

1. Select Sample Graph or Input Custom JSON

2. React Flow JSON (Input)

Sample: simple
{
  "nodes": [
    {
      "id": "start-1",
      "type": "event",
      "position": {
        "x": 100,
        "y": 100
      },
      "data": {
        "label": "Start Process",
        "description": "Process initiation"
      }
    },
    {
      "id": "task-1",
      "type": "processTask",
      "position": {
        "x": 300,
        "y": 100
      },
      "data": {
        "label": "Process Task",
        "description": "Main processing step"
      }
    },
    {
      "id": "end-1",
      "type": "event",
      "position": {
        "x": 500,
        "y": 100
      },
      "data": {
        "label": "End Process",
        "description": "Process completion"
      }
    }
  ],
  "edges": [
    {
      "id": "e1-2",
      "source": "start-1",
      "target": "task-1",
      "type": "default",
      "data": {}
    },
    {
      "id": "e2-3",
      "source": "task-1",
      "target": "end-1",
      "type": "default",
      "data": {}
    }
  ]
}

3. mxGraph XML (Output)

Success

How to Test

Testing with Samples:

  • • Click any sample button above
  • • See immediate JSON → XML conversion
  • • Check conversion time and analysis
  • • Copy output for external validation

Testing with Custom Data:

  • • Paste your React Flow JSON in the textarea
  • • Click "Convert Custom JSON"
  • • Verify the XML structure matches expectations
  • • Test with edge cases and complex graphs