jgraph / jgraph/drawio

Exporting doesn't get custom CSS rules set in the software

Open
#5,585 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug possible-duplicate
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:

  1. Go to Extras
  2. Click on Configuration
  3. Scroll down to Custom CSS
  4. Add new CSS Rules, for example a class changing the behavior of a div
  5. Apply
  6. Reset the software
  7. On the top bar clic the < > (HTML) button
  8. Add a class to the HTML tag of your text.
  9. Go to File
  10. Click on Export As ->
  11. Select any of the options, (I have checked HTML, SVG, PDF, PNG)
  12. Save your file to your PCExpected behavior
    The generated file should look as the file the program.

Screenshots

Image My file on the desktop Image My file on a PDF viewer.

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;
}

MWE.drawio

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.