Configure node fill, stroke and text colors

[ggrossetie]

Hey! Thanks for this great tool. I wonder if it's possible to configure node fill, stroke and text colors? In one example, I saw that the text can be configured using x := text. Maybe we could extend this syntax:

x.fill_color := blue
x.text_color := white
x.stroke_color := red

Supporting hex color codes (and eventually other notations: hsl, rgb) could be nice.

Full disclosure, I'm working on https://kroki.io/ and I think Swirly could be a neat addition since diagrams are defined in plain-text 🎉

[timdp]

First off: I like Kroki! I've been using https://quickchart.io/ for charts lately and I could see myself using Kroki for diagrams.

As for your question: there's actually quite a bit of support for styling. However, unfortunately, it's largely undocumented. But let me have a stab at a high-level overview...

In the concatAll example, you can see that there's an optional [styles] section in the diagram spec. That allows you to define diagram-level stylesheets.

A full listing of the supported stylesheet props can be found in the DiagramStyles type. For example, arrow_fill_color from concatAll is the first one there, on line 80, and its type is Color. I need to improve the actual type definitions, because Color in particular is just an alias for string right now. However, it actually means "whatever SVG supports", so hex, rgb, hsl, and even named colors should work fine today!

Now, the diagram spec format will only let you define styles that apply to the entire diagram. To assign different colors to individual notifications (nodes), I kinda cheated, and made Swirly autogenerate them by hashing the notification value. That's why event_fill_color can take the illustrious auto values.

That said, you can actually override the individual colors already, but it requires using the JavaScript API instead of the textual diagram format. Each notification has its own styles property, much like inline style in CSS. Unfortunately, the text file doesn't let you do that yet, and the JS API isn't that stable.

Of course, it'd be a great addition to control notification colors in the text file. I like the syntax you're proposing, but I've actually also been toying with overhauling the diagram syntax entirely (except for the RxJS-compliant observable itself). When I cobbled it together, I didn't really know where I was going with it yet, and that's beginning to show. Now that I have a better understanding, I think I can do better.

[ggrossetie]

First off: I like Kroki! I've been using quickchart.io for charts lately and I could see myself using Kroki for diagrams.

Thanks 🤗

As for your question: there's actually quite a bit of support for styling. However, unfortunately, it's largely undocumented. But let me have a stab at a high-level overview... In the concatAll example, you can see that there's an optional [styles] section in the diagram spec. That allows you to define diagram-level stylesheets. A full listing of the supported stylesheet props can be found in the DiagramStyles type. For example, arrow_fill_color from concatAll is the first one there, on line 80, and its type is Color. I need to improve the actual type definitions, because Color in particular is just an alias for string right now. However, it actually means "whatever SVG supports", so hex, rgb, hsl, and even named colors should work fine today!

Yes, I took a quick look at the examples to figure out the syntax.

Now, the diagram spec format will only let you define styles that apply to the entire diagram. To assign different colors to individual notifications (nodes), I kinda cheated, and made Swirly autogenerate them by hashing the notification value. That's why event_fill_color can take the illustrious auto values.

I noticed that when I was updating node names, the color was updated as well.

That said, you can actually override the individual colors already, but it requires using the JavaScript API instead of the textual diagram format. Each notification has its own styles property, much like inline style in CSS. Unfortunately, the text file doesn't let you do that yet, and the JS API isn't that stable. Of course, it'd be a great addition to control notification colors in the text file. I like the syntax you're proposing, but I've actually also been toying with overhauling the diagram syntax entirely (except for the RxJS-compliant observable itself). When I cobbled it together, I didn't really know where I was going with it yet, and that's beginning to show. Now that I have a better understanding, I think I can do better.

What would be the path forward? Wait for the diagram syntax overhaul?

[timdp]

What would be the path forward? Wait for the diagram syntax overhaul?

I don't have a timeline for that, like, at all. So in the meantime, I've hacked it into the code with syntax similar to what you proposed. Take a look at the skipUntil example to get a sense of how it works. You should be able to paste that into swirly.dev to try it out. I'm going to mull it over some more before I release it though.

[timdp]

I've gone ahead and released this as part of v0.19.0. I'll close this issue but feel free to leave your thoughts!