Color change on flowchart node in PDF export - why?

[Michelle Rau HP]

Hi, on a couple pages, I have a Flowchart macro that includes a node as follows,

  node [fillcolor=green,color=green,fontcolor=white];  "Closed";

 On the screen, this creates a rounded rectangle with a medium-dark shade of green: comforting, restful, easy on the eyes, like a pine tree in summer.

In a PDF export, the node appears as a rounded rectangle with a light fluorescent shade of green: searing, weird, hard on the eyes, like ads designed to drive people to madness.

Using SVG output format for the flowchart macro. I have no PDF style options set. How does this happen?

In the meantime, I used darkgreen as the color instead, which produced more consistent results.

[Michelle Rau HP]

Hello and thank you for your response. I'm including screenshots and the Flowchart macro text.

First here are the colors as they appear on the screen:

And here are the colors as they appear in the PDF. You can see in the "old colors" row that aqua and light green have changed to black in the PDF (both nodes and arrows), and the dark green of 8 has changed to the fluorescent green.

You can see that the colors in the "new colors" row are more consistent between PDF and screen. 

I am using the Flowchart macro, output = SVG. Here is the flowchart with old colors (including aqua)

digraph { 
  rankdir=LR;
rank=same;
  node [shape=box,style="rounded,filled"] 
  node [fillcolor=blue,color=blue,fontcolor=white,URL="https"]; 1;
  node [fillcolor=lightblue,color=lightblue,fontcolor=black,URL="https"]; "2";
  node [fillcolor=orange,color=orange,fontcolor=black,URL="https"]; 3;  
  node [fillcolor=yellow,color=yellow,fontcolor=black, URL="https"];  "4";
  node [fillcolor=aqua,color=aqua,fontcolor=black, URL="https"];  "5";
  node [fillcolor=lightgreen,color=lightgreen,fontcolor=black, URL="https"];  "6";
  node [fillcolor=black,color=black,fontcolor=white, URL="https"];  "7";
  node [fillcolor=green,color=green,fontcolor=white, URL="https"];  "8";
1 -> "2" -> 3 -> "4" -> "5" -> 6 -> 8
"2" -> "4"
6 -> 7 -> 8
"5" -> 3 [style=dotted,color=aqua]
"5" -> "2" [style=dotted,color=aqua]
6 -> 3 [style=dashed,color=lightgreen]
6 -> "4" [style=dashed,color=lightgreen]
 }

And here is the Flowchart macro with the new colors:

digraph { 
  rankdir=LR;
rank=same;
  node [shape=box,style="rounded,filled"] 
  node [fillcolor=blue,color=blue,fontcolor=white]; 1;
  node [fillcolor=lightblue,color=lightblue,fontcolor=black]; "2";
  node [fillcolor=orange,color=orange,fontcolor=black]; 3;  
  node [fillcolor=yellow,color=yellow,fontcolor=black];  "4";
  node [fillcolor=purple,color=purple,fontcolor=white];  "5";
  node [fillcolor=brown,color=brown,fontcolor=white];  "6";
  node [fillcolor=black,color=black,fontcolor=white];  "7";
  node [fillcolor=darkgreen,color=darkgreen,fontcolor=white];  "8";
1 -> "2" -> 3 -> "4" -> "5" -> 6 -> 8
"2" -> "4"
6 -> 7 -> 8
"5" -> 3 [style=dotted,color=purple]
"5" -> "2" [style=dotted,color=purple]
6 -> 3 [style=dashed,color=brown]
6 -> "4" [style=dashed,color=brown]
 }

As I mentioned, there are no PDF output settings or CSS specified. This was brought to my attention by someone else exporting a page as a PDF and I was able to reproduce the issue. Changing the colors is a workaround, but we are beginning to use and share more flowcharts and I would like to set users' expectations better so they can consistently create usable PDFs.

[Diego]

Hello there Michelle!

I was actually unable to replicate this behaviour locally. But due to a completely different reason. The SVG images are not loading:

                                                                      

I tried to downgrade the plugin, create new pages but ultimately the SVG output did not work. However, I was able to export the graphs using the PNG format. The only thing we need to change is the naming of the colors. Here is some information about those names:

Color Names - Graphviz

For example, aqua can be replaced by cyan. You will notice that the macro will tell you that some color names are incorrect. You will need to fix those and set them according to the X11 color scheme.

Let us know your thoughts!

[Michelle Rau HP]

Hi Diego thank you for your reply and I believe I have a good strategy now. I was using an SVG output format because we wanted the nodes to be clickable. We will stick with the X11 color scheme as you suggested or with colors that are the same in both schemes.

In a further test, I edited the "old colors" macro to output as PNG, and got the black nodes displaying on the screen and in the PDF). To summarize,

SVG color scheme + SVG output + = OK on screen, color shift in PDF

SVG color scheme + PNG output = color shift on screen, color shift in PDF

[Diego]

Hello again Michelle!

Thanks for digging deeper into this issue! With the new information we have on this, you could reach out to Bob Swift Team and check if they have a fix or workaround in mind for this:

Bob Swift Support

Let us know if there is anything else!

[Michelle Rau HP]

Thanks for responding, I think this is actually an #Avono macro. The "documentation" link takes me here: 

https://avono-support.atlassian.net/wiki/spaces/PUML/pages/17727499/Macro+flowchart

And if I look at the markup it says:

{flowchart:atlassian-macro-output-type=INLINE|format=SVG}

Noted!

Michelle

[Diego]

Hello there Michelle!

Would it be possible for you to share screenshots of the described discrepancy? Keep in mind that Atlassian Community is a public space and any information posted here will be visible to anyone. With this in mind, take care not to disclose confidential and /or sensitive information with the screenshots.

Further, could you clarify for us if you are using the Graphvis Diagrams for Confluence Macro from Graphviz:

Graphvis Diagrams for Confluence Macro

Please keep us posted.