Diagrammatic-UI Playground

Write, test, and visualize your Diagrammatic-UI components in real-time

About the Playground

This playground allows you to write and test Diagrammatic-UI components directly in your browser using react-live for real-time code evaluation.

Tips:

  • The code is evaluated in real-time as you type
  • Write your code as a function that returns JSX
  • The Graph component is ready to use without imports
  • Configure graph appearance with theme and autoLayout props
  • Set layout options with autoLayout: 'circular' (other options: 'tree', 'grid')