how to add color?

[fyddaben]

rt ..i want add some key word different color .thx ..

[adrai]

? colors can be defined for all elements, per element type, per flowstate or with jquery...

[Stwissel]

@fyddaben For the "selected individual elements" the syntax is:

  op2=>operation: Stuff|current

where current is the "flowstate". I choose "flowstate" for alternate layout definitions, since my primary use case was to show the progress of a workflow instance using colors. To then alter the visuals, you need to have that flowstate defined in your configuration:

  'flowstate' : {
                            'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
                            'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'}
                    }

as part of your configuration object. For ad-hoc color changes use JQuery as adrai suggested.

[ekhristin]

And how do you change the color using your plugin in the editor?

[Stwissel]

What are you trying to do? The “editor” is a text box. There is nothing about colour in it.

[ekhristin]

What are you trying to do? The “editor” is a text box. There is nothing about colour in it.

I'm trying to understand what is going for "|" op2=>operation: Stuff|current what is "current"?

[Stwissel]

current is the name of a flowstate -> check the configuration json, pointing to CSS properties. Keep in mind: this is a library to embed, not a ready to use app

[ekhristin]

current is the name of a flowstate -> check the configuration json, pointing to CSS properties. Keep in mind: this is a library to embed, not a ready to use app

not quite clear. Can I have a link to study what you are talking about?

[Stwissel]

It is all on the page. When you define your option Json you add an element flowstate that contains key value pairs. They key is the name of the state, the part that goes behind the |, the value is the CSS definition. Look at the sample on the page. E.g. the state “invalid” defines the fill Color as #444444 which is a dark gray. The colours can either be expressed as colour names or hexcodes, as specified by CSS.

Copy the sample onto your own page and play with the values in the flowstate section of the options object. This should make it obvious.

Just to be clear: there isn’t a UI facility to change colours. This is a rendering library for developer use. You are of course free to build an UI to configure the content of the options object if you like

[Stwissel]

Maybe your question is more fundamental.... The flowstate variable is used to style (colour, font) a flow element. This allows to highlight parts of the flow. Use cases:

• documentation to visualise the path taken for certain conditions
• interactive: walk through a flow (with some JS altering the flowstate variable on click)
• running process: show current state and available as well as closed options

[ekhristin]

It is all on the page. When you define your option Json you add an element flowstate that contains key value pairs. They key is the name of the state, the part that goes behind the |, the value is the CSS definition. Look at the sample on the page. E.g. the state “invalid” defines the fill Color as #444444 which is a dark gray. The colours can either be expressed as colour names or hexcodes, as specified by CSS.

Copy the sample onto your own page and play with the values in the flowstate section of the options object. This should make it obvious.

Just to be clear: there isn’t a UI facility to change colours. This is a rendering library for developer use. You are of course free to build an UI to configure the content of the options object if you like

the fact is that I use flowchart.js in the framework of the typora editor program. In this editor there is no possibility to transfer json to an object, you can only use css to change the values of the layout elements. At first I thought that the name goes for | there is a class selector, but CSS experiments did not lead to any results