This project is not covered by Drupal’s security advisory policy.
Visualize webform structure and conditional logic as interactive Mermaid flowcharts. Helps site builders understand complex form flow, wizard steps, and conditional visibility rules at a glance.
Features
- Automatic flowchart generation: Creates a visual diagram from any webform's elements, pages, and conditional logic automatically.
- Conditional logic visualization: Shows which fields appear based on user selections, making complex conditional forms easy to understand.
- Wizard page flow: Displays multi-page form flow with clear navigation paths between pages.
- Export options: Download flowcharts as SVG or PNG images for documentation or client presentations.
- Developer-friendly toggle: Optional display of element machine names for easier theming and debugging.
- Zero configuration: Works immediately after installation—no setup required.
Post-Installation
- Install the module using Composer:
composer require drupal/webform_mermaid_chart - Enable the module:
drush en webform_mermaid_chart - Navigate to any existing webform (Structure → Webforms → [Your Webform])
- Click the new "Flowchart" tab next to Build, View, Settings, etc.
- The flowchart renders automatically. Use the toolbar to toggle element keys or download the image.
No configuration page exists—this module works automatically on all webforms. The Flowchart tab is shown between Elements and Source when you manage the webform.
Additional Requirements
- Webform module (version 6.2 or higher)
- Mermaid JavaScript library (loaded automatically from CDN; local copy optional)
Recommended modules/libraries
No additional modules are required. The module works best with the standard Webform module configuration.
Similar projects
Webform Fields Chart provides similar visualization functionality but requires the Webform Conditions module as a dependency. This module (Webform Mermaid Chart) has no additional dependencies beyond Webform core—conditional logic visualization works out of the box.
Supporting this Module
Development and maintenance are sponsored by Dictu. Community contributions, bug reports, and feature requests are welcome via the issue queue.
Community Documentation
This module was developed with assistance from AI tools (Kilo Code / Claude) as part of an experimental workflow.
| Attachment | Size |
|---|---|
| Screenshot 2026-10-02 at 15.03.25.png | 205.22 KB |
Project information
- Project categories: Administration tools, Content editing experience, Integrations
- Ecosystem: Webform, Mermaid Integration
- Created by groendijk on , updated
This project is not covered by the security advisory policy.
Use at your own risk! It may have publicly disclosed vulnerabilities.
