Exporting doesn't get custom CSS rules set in the software
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 8.2k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Preflight Checklist
- I agree to follow the Code of Conduct that this project adheres to.
- I have searched the issue tracker for a feature request that matches the one I want to file, without success.
You must search the issue tracker and agree to the code of conduct. You must fill in this entire template. If you delete part/all or miss parts out your issue will be closed.
If you are technical, you should report bugs along the lines of https://marker.io/blog/how-to-write-bug-report. If you are not technical, we will make allowances, please try to make an effort to understand the process.
Describe the bug
The exporting of a document won't keep Custom CSS rules in the final document.
To Reproduce
Steps to reproduce the behavior:
- Go to Extras
- Click on Configuration
- Scroll down to Custom CSS
- Add new CSS Rules, for example a class changing the behavior of a div
- Apply
- Reset the software
- On the top bar clic the < > (HTML) button
- Add a class to the HTML tag of your text.
- Go to File
- Click on Export As ->
- Select any of the options, (I have checked HTML, SVG, PDF, PNG)
- Save your file to your PCExpected behavior
The generated file should look as the file the program.
Screenshots
draw.io version (In the Help->About menu of the draw.io editor):
- draw.io v29.7.9
Desktop (please complete the following information):
- OS: Windows
- OS Version 11, version 25H2
I tested the problem in incognito/private mode with all browser extensions switched off, write "yes" below:
- N/A as I'm using the desktop version
Additional context
Add this code so the MWE can work.
.cuadro-amarillo {
margin-right: 5px;
margin-left: 5px;
font-family: Arial, Helvetica, sans-serif;
}
.cuadro-amarillo .titulo {
padding: 5px;
text-align: center;
font-weight: bold;
border: 1px solid #deb80e;
border-bottom: 0px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.cuadro-amarillo .cuadro-texto {
padding: 5px;
border: 1px solid #deb80e;
line-height: 0.9;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.cuadro-texto ul {
margin-top: 10px;
margin-bottom: 1px;
padding-left: 20px;
}
.cuadro-texto p {
margin-top: 4px;
margin-bottom: 1px;
}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the export behavior with MWE.drawio, using the Custom CSS configuration and the File > Export As path described in the issue. Trace how custom CSS is carried into HTML, SVG, PDF, and PNG exports. Done means exported files retain the configured rules and match the editor's appearance.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100