feat:ditaa_v1_CI_fixes

[Swayam-hue]

📑 Summary

Adds initial ditaa diagram support to Mermaid using a custom TypeScript-based ASCII grid parser and SVG renderer. The implementation introduces lazy-loaded diagram registration, theme-aware rendering, unit tests, E2E snapshot tests, demo pages, and user documentation.

Current MVP supports:

• rectangular and rounded boxes
• horizontal/vertical connectors
• directional and bidirectional arrows
• dashed borders/connectors
• free-floating text labels
• Mermaid theme integration (default, dark, forest, neutral)

Resolves #7725

📏 Design Decisions

• Implemented a custom ASCII-grid parser instead of Langium since DITAA is spatial rather than grammar-based.
• Added a dedicated ditaa diagram module following Mermaid's standard architecture:
  • detector
  • parser
  • db
  • renderer
  • styles
• Used a 3-phase parsing pipeline:
  1. box detection
  2. arrow detection
  3. free-floating text extraction
• Implemented a pure TypeScript/D3 SVG renderer with no external rendering dependencies or WASM.
• Integrated Mermaid theme variables for consistent styling.
• Added 17 Vitest unit tests and 12 Cypress E2E snapshot tests - all passed.

📏 Limitations

1. Monospace grid only: Tabs and variable-width fonts break detection
2. No color or shadow tags yet: Can be worked upon as soon as the initial build is accepted
3. No diagonal lines: Only horizontal (-) and vertical (|) are implemented
4. No line bending: Single direction lines only

📏 Demo

Input

ditaa
+-----------+      /-------------\      +-------------+
|           | ---> |             | ---> |             |
|  Mobile   |      | Notification|      | SMS Gateway |
|   App     | <--- |   Service   | <--- |             |
+-----------+      |             |      +-------------+
                   \-------------/
                           |
                           |
                           v
                    +-------------+
                    |             |
                    | Email Queue |
                    |             |
                    +-------------+

Output

📋 Tasks

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[netlify]

❌ Deploy Preview for mermaid-js failed.

Name	Link
🔨 Latest commit	59f9728
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6a0434e5e5710a000863280f

[changeset-bot]

🦋 Changeset detected

Latest commit: 59f9728

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR