Rendering untrusted diagrams safely
Yes, Pele is designed to draw diagrams written by anyone. Its SVG contains no scripts, event handlers or HTML labels, dangerous links are removed, and oversized diagrams are refused. Your app still has a few jobs, listed below.
What Pele guarantees
- No code from the diagram ever runs. Labels are SVG text. HTML tags in a label are dropped and only their words are kept; bold and italic turn into text styles. JavaScript
clickcallbacks are ignored. - Links are filtered. Allowed by default: relative links and
http,https,mailto,tel(andhttp,httpsfor images).javascript:,data:andvbscript:are always blocked. - Styles are filtered before they reach the SVG.
- Size limits:
| Limit | Default | Option |
|---|---|---|
| Diagram text | 50,000 characters | limit |
| SVG output | 4,000,000 characters | outputLimit |
| Arrows in a flowchart or agent flow | 5,000 | maxEdges |
There's no time limit; if you need one, render in a Web Worker you can stop.
What your app must do
- Show errors as text. Use
textContent, neverinnerHTML: error messages can quote the diagram. - Only supply trusted icons. Markup returned by your
iconsfunction is inserted as-is. - Treat internal links as note names. For links with
internal: true, apply your own navigation rules. - Keep the options to yourself. Don't let diagram authors pass render options or
config.
Want your own sanitizer too? Pass sanitize to mount(); it runs before each SVG goes in.
Try to break it in the paste-anything demo. Found a real problem? Report it privately through Pele's security advisories.