Skip to content

Improve Documentation: Add maxTextSize Configuration Reference #7778

Description

@kacemabidi12

Summary
The current documentation doesn't clearly explain how to configure maxTextSize, which is needed for large diagrams. This leads to user confusion when encountering the "Maximum text size in diagram exceeded" error message.

Problem
Users encounter the following error when working with large diagrams: graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa Without clear documentation, users don't know they can increase this limit via configuration.

Proposed Documentation Changes

1. Add to Configuration Guide (likely docs/config/usage.md)

New Section: Handling Large Diagrams

Large Diagrams

By default, Mermaid limits diagram source text to 50,000 characters to ensure good performance and prevent browser slowdowns. For complex diagrams (large flowcharts, detailed sequence diagrams, etc.), you can increase this limit:

**Important Notes:**   
- Setting maxTextSize to 0 disables the limit entirely   
- Extremely large diagrams may impact browser performance and memory usage   
-  Monitor your browser's performance when working   with very large diagrams   
- For production use, test with your typical   diagram sizes to find an optimal balance   


2.  Update Getting Started Guide (likely   `docs/intro/getting-started.md`)    

**Add to the configuration section:**   ```markdown   
#### Configuration Options    

Mermaid can be configured to suit your needs. Here    are some common options:    - **maxTextSize**: Maximum size of diagram text in    characters (default: 50,000)      

Example for large diagrams:     

```javascript  mermaid.initialize({       maxTextSize: 200000,       theme: 'default',       // ... other options     });    


### 3. Add to FAQ/Troubleshooting (create if not   existing)    
**New FAQ Entry:**   

```markdown   ### Why is my large diagram showing "Maximum text   size in diagram exceeded"?    
Mermaid has a default text size limit of 50,000   characters for performance reasons. To resolve   this:    

1. Increase the limit in your initialization:      
```javascript      mermaid.initialize({ maxTextSize: 200000 });    

2. For unlimited size (use with caution):   mermaid.initialize({ maxTextSize: 0 });    Warning: Disabling the limit may cause performance    issues with extremely large diagrams.    
## Files to Update   - `docs/config/usage.md` 
- Add "Handling Large   Diagrams" section   - `docs/intro/getting-started.md` 
- Add   maxTextSize to configuration examples   
- `docs/faq.md` or create - Add troubleshooting   entry    


## Additional Improvements (Optional)   
1. Update the error message to be more informative:      
```javascript      // In mermaidAPI.ts      
const MAX_TEXTLENGTH_EXCEEDED_MSG = 'graph TB;a[Diagram exceeds maximum size (50,000 chars). 
Set maxTextSize in config];style a    fill:#faa';  

  
2. Add a large diagram example in the documentation to demonstrate this configuration    Rationale   
 
- Discoverability: Users searching for solutions to truncation issues should find this easily   
- User Experience: Clear documentation prevents confusion and frustration   
- Self-Service: Empowers users to solve this   without needing to ask for help   
- Best Practices: Guides users on performance   considerations    Checklist    
- Documentation clearly explains the default limit   
- Shows how to increase the limit   
- Warns about performance implications   
- Links to configuration examples   
- Added to FAQ for quick troubleshooting

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions