Styling, themes and layout

How a Studio diagram looks is decided in three places: the source (colours, fonts, shapes and direction written in the engine's own language), the theme the canvas is shown in (light or dark), and the workspace around it (which panels are open and where). This page covers all three — the Style flyout with its layout direction and eight journal presets, quick recolouring on the canvas, styling written directly in Mermaid, Graphviz, PlantUML, D2 and chart specs, how light and dark mode change what you see and what you export, and how to arrange the Studio itself, from the code sheet to the Modern and Classic layouts and your accent colour.

At a glance

Where a diagram's look comes from

Everything that changes a diagram's appearance in the Studio ends up as source. The Layout direction button edits the direction keyword; the Colour tool writes a style line; a preset asks AI to rewrite the styling in your engine's own syntax. So the result is always ordinary code you can read, adjust by hand, undo with ⌘Z, share and export.

The two exceptions are display-only and never touch your source: the theme (light or dark mode changes how the canvas draws the diagram) and the workspace (panels, layout and accent colour). Exports are taken from the diagram as it is drawn on screen, which is why the theme matters when you export; see Light, dark and system.

The Style flyout

Select Style on the tool rail. A flyout titled Style opens beside the rail; Escape, a click outside it, or × (Close style) closes it, and applying a preset closes it for you. It floats over the canvas in both the Modern and Classic layouts. On a phone it opens as a bottom sheet.

Layout direction

When the open figure is a Mermaid flowchart (its first flowchart or graph line names a direction), the flyout's first row reads Layout direction, with a button showing the current direction. Each press moves to the next one and rewrites that keyword in your source:

A toast confirms the change, for example Direction → LR. No AI is used and each press is one undo step. If a source carries DT or RD — spellings Mermaid does not accept — the button treats them as TD and the first press moves to LR, which also gets the diagram rendering again.

The same command is available from ⌘K as Cycle the layout direction. On any other engine it answers "Direction not applicable for this engine", and the row is not shown in the flyout. Set the direction in the source instead:

Presets

Under Presets, eight journal and palette styles are listed by name, each with up to five colour swatches; hover over a row to read its description.

To apply one:

1. Open the figure you want to restyle and select Style.
2. Select a preset. A spinner appears on its row, and the other rows are greyed out while it works.
3. When it finishes, the flyout closes and the restyled source replaces the old one. Press ⌘Z to go back.

The preset is applied by the flowss Studio Agent, with the instruction to keep the diagram's content and structure unchanged and change only colours, typography and stroke weights. The flowss Studio Agent writes the styling in your engine's own syntax (style and class lines in Mermaid, attributes in Graphviz, skinparam in PlantUML, config in Vega-Lite and so on), so read the result and adjust anything you want different. If it fails, a red message appears under the list — for example "AI returned no result." — and your source is left as it was.

Note: Presets need AI on your plan: Starter with your own key, or Plus and above with hosted AI points. Each application is one standard AI request. The Layout direction control needs no AI and works on every plan.

Quick styling on the canvas

Click any label on the diagram to select that element; the Diagram tools panel appears at the top right of the canvas. Two of its tools change appearance directly, without AI:

Colour offers twelve swatches: six pastels (#fee2e2, #fef3c7, #dcfce7, #dbeafe, #ede9fe, #fce7f3) for fills behind dark text, and six strong colours (#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899). Each press is one undo step, and the element stays selected so you can recolour several in a row. On other engines these tools say they are not a direct edit there yet; use Ask the flowss Studio Agent… in the same panel (which needs AI), or write the style in the source. See The Studio editor for the rest of the panel.

Styling with AI from the prompt

The prompt at the bottom of the canvas (Describe a diagram or a change…) accepts any styling request in plain words — "make the decision nodes amber", "use a serif font", "thicker arrows". While the canvas is blank, or while the prompt has focus, it offers up to three suggestion chips:

× (Hide suggestions) hides the chips for good in this browser. All of these use AI; see The flowss Studio Agent: prompt and quick help.

Writing styles in the source

For exact control, write styling in the engine's own syntax. These are each engine's standard features; the engine reference at /docs/engines links to each engine's full documentation.

Mermaid

%%{init: {"theme": "neutral", "themeVariables": {"fontFamily": "Georgia"}}}%%
flowchart LR
  A[Request] --> B{Valid?}
  B -->|yes| C[Process]
  B -->|no| D[Reject]
  classDef warn fill:#fef3c7,stroke:#b45309,color:#0b1220
  class D warn
  style C fill:#dcfce7,stroke:#15803d
  linkStyle 2 stroke:#dc2626,stroke-width:2px

• classDef defines a reusable style and class applies it to nodes; style styles one node; linkStyle styles a connection by its position (counting from 0).
• An %%{init: …}%% line at the top sets Mermaid's own theme and theme variables for this diagram, instead of the Studio's light or dark default.
• The Studio draws Mermaid with the Inter typeface, curved flowchart connections and HTML labels unless your source says otherwise.
• Mermaid's interactive click links are disabled on the canvas for safety.

Graphviz (DOT)

digraph G {
  rankdir=LR;
  node [shape=box, style="rounded,filled", fillcolor="#dbeafe", fontname="Helvetica"];
  edge [color="#64748b", arrowsize=0.8];
  ingest -> clean -> model;
  model [fillcolor="#dcfce7"];
}

Graph, node and edge attributes all work, because the Studio runs the full Graphviz layout engine in your browser.

PlantUML

@startuml
skinparam defaultFontName Helvetica
skinparam ArrowColor #64748b
skinparam rectangle {
  BackgroundColor #dbeafe
  BorderColor #1d4ed8
}
rectangle Ingest
rectangle Model
Ingest --> Model
@enduml

skinparam settings and PlantUML's own !theme directive are applied by the PlantUML server that draws the diagram.

D2

direction: right
api: API {shape: hexagon}
db: Postgres {shape: cylinder}
api -> db: queries
api.style.fill: "#dbeafe"
db.style.stroke: "#1d4ed8"

flowss draws D2 by translating it to Graphviz, which supports the common subset: shapes, labels, containers, direction, and style.fill and style.stroke colours. Other style keywords (such as opacity, fonts, shadows or stroke widths), attributes on connections, and anything else the translation cannot draw are not silently approximated: they are named in a note under the figure. A colour Graphviz does not accept is reported the same way ("fill … is not a colour Graphviz accepts, so it is not drawn").

Vega-Lite, Vega and Plotly

Style charts through their own config (Vega-Lite and Vega) or layout (Plotly) blocks. On the Studio canvas a few settings are taken over so charts sit cleanly on the dotted ground:

Native flowss engines

The engines built into flowss (Sankey, Kanban, PERT, fault trees, value streams, Gantt and the rest) take styling as attributes in their own source; each engine's page under /docs/engines shows the syntax. They are drawn in the current theme.

Light, dark and system

Switching theme

System follows your device's appearance setting and changes with it. Your choice applies across flowss and is remembered in this browser.

What the theme changes

The theme changes how the diagram is drawn on screen, never its source:

In both themes a plain white page behind the diagram (such as PlantUML's) is removed so the dotted canvas shows through; a coloured background you set in the source is kept.

How the theme affects exports

Exports and clipboard copies are taken from the diagram as drawn, in the current theme:

Warning: Exporting from dark mode with Transparent background on gives pale text and lines with no background. On a white slide or page they will be nearly invisible. For print, papers and light slides, switch to light mode before exporting.

Image scale (1×, 2× or 3×; 3× by default) and Transparent background are in ⋮ → Export ▸, and are remembered. See Exporting your work.

Arranging the workspace

Modern and Classic layouts

Switch with Studio ▾ → Layout, the layout button in the view island (Switch to classic layout / Switch to modern layout), or ⌘K Switch layout (Modern ↔ Classic). In Classic, the code sheet takes a column of its own beside the rail, and the Library opens as a docked panel that stays until you close it; the Style and Convert flyouts still float, because they close as soon as you use them. See A tour of the workspace.

The code sheet and panels

The Studio remembers the code sheet's width and whether it was open, which side-panel pane was open, and in Classic which rail panel was open. See The Studio editor for the full controls.

Accent colour

Settings (⌘,) → Personalization & privacy → Accent vibe tints buttons, highlights and gradients across the app. The choices are Indigo (the default), Fuchsia, Cyan, Emerald, Amber, Rose and Violet. It changes the interface only, never your diagrams, and is stored in this browser. Choosing a role in the same section tunes recommendations only and keeps your accent.

Separately, the Studio tints a few details in the current engine's colour — the dot beside the engine name, the stripe on template rows, the canvas focus ring — so you can tell at a glance which engine a figure uses.

Motion

flowss honours your device's reduce motion setting: interface animations are cut to nothing, and on the Studio launchpad the animated preview, the typing placeholder and the decorative background stay still.

Tips

• Decide on a preset early, then edit content; re-applying a preset after big content changes costs another AI request.
• For papers, IEEE / publication survives black-and-white printing, and Okabe-Ito is the safest colour palette for any audience.
• Keep a styled figure as a template for yourself: duplicate it from the figure switcher whenever you need the same look.
• Mermaid classDef styles are easier to maintain than many style lines: define a class once and apply it to every node that needs it.
• To match a document's look exactly, write the colours in the source rather than relying on a preset; the source is what exports.
• Export from light mode for print; use dark mode exports for dark slide decks.

Limits and known constraints

• Layout direction works only on Mermaid flowcharts; other engines set direction in the source.
• Presets, the AI prompt and Ask the flowss Studio Agent… need AI (Starter with your own key, Plus and above with hosted points). Free has no AI.
• Direct Colour works on Mermaid, Nomnoml and Graphviz; Bigger on Mermaid only.
• D2 is drawn through Graphviz in flowss, so only part of D2's styling is drawn; what is not drawn is listed under the figure.
• On the Studio canvas, chart backgrounds and Plotly's base font are set by the canvas, as described above.
• Exports reflect the current theme; there is no separate "export in light mode" switch.
• Classic layout needs a window at least 1,024 pixels wide.
• The accent colour, theme and layout are per browser and do not follow you to another device.

Troubleshooting

Related pages

• The Studio editor
• Starting from a template
• Importing and converting
• The icon library
• The flowss Studio Agent: prompt and quick help
• Exporting your work
• A tour of the workspace
• Account settings and your data
• Engine reference