›
›
›
  1. docs
  2. ›
  3. byrcsc/laravel-cartographer
1.x
Browse documentationOpenClose

Getting started

  • Introduction
  • Installation and setup
  • Quick start

Core concepts

  • How a diagram is built
  • Model discovery
  • Relationship detection
  • Schema introspection
  • Scoping a diagram

Operations

  • Diagrams per subsystem
  • Exporting images
  • Themes and fonts
  • Renderer limits
  • Keeping the diagram current
  • Continuous integration

Reference

  • Configuration
  • Console commands
  • Diagram syntax
  • PHP API
  • Testing
  • Troubleshooting

Getting started

  • Introduction
  • Installation and setup
  • Quick start

Core concepts

  • How a diagram is built
  • Model discovery
  • Relationship detection
  • Schema introspection
  • Scoping a diagram

Operations

  • Diagrams per subsystem
  • Exporting images
  • Themes and fonts
  • Renderer limits
  • Keeping the diagram current
  • Continuous integration

Reference

  • Configuration
  • Console commands
  • Diagram syntax
  • PHP API
  • Testing
  • Troubleshooting

byrcsc/laravel-cartographer · 1.x

Themes and fonts.

Style exported diagrams with built-in or custom themes and font stacks.

An exported image can be drawn in a preset. A preset is a Mermaid themeVariables map plus the font stack it is drawn in, selected by name:

php artisan cartographer:erd --format=svg --theme=dracula
php artisan cartographer:erd --format=png --theme=dracula --font=sans
// config/cartographer.php
'export' => [
    'theme' => 'dracula',
    'font' => null,
],

Themes never enter the source

This is the rule the rest of the page follows from. A theme is passed to the renderer at export time and is never written into the Mermaid text, so your committed Markdown and .mmd files carry no colours at all.

That is deliberate. GitHub and GitLab theme a mermaid fence to whatever the reader has chosen, light or dark, and a diagram with baked-in colours fights that. Keeping the source neutral means one committed file that reads correctly for everyone.

The visible consequence: passing --theme or --font to a text format does nothing, and says so.

   INFO  Themes and fonts apply to svg and png exports only. Text output stays
         theme-neutral so GitHub and GitLab can theme it themselves.

It is a notice, not an error, and the run succeeds. A script that renders both Markdown and an SVG can pass the same flags to both without branching.

For the same reason, an unknown theme name fails only on a run that actually renders an image. A text run never resolves the theme, so a typo in export.theme surfaces the first time you export rather than on every command.

The built-in presets

Two ship with the package.

light

The default. A GitHub-like palette: #ffffff behind the diagram, #1f2328 text, #d0d7de entity borders, #57606a relationship lines, and alternating #ffffff and #f6f8fa attribute rows.

dracula

The Dracula palette: #282a36 behind the diagram, #f8f8f2 text, #44475a entity boxes with #bd93f9 borders, and #ff79c6 relationship lines.

php artisan cartographer:erd --format=svg --theme=dracula --output=docs/erd.svg

Both are drawn on Mermaid's base theme, which is the only built-in Mermaid theme that honours a full themeVariables map.

Font stacks

Every preset carries a font stack, and --font swaps it without touching the colours.

NameStack
mono'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace
sansInter, 'Segoe UI', system-ui, sans-serif
default"trebuchet ms", verdana, arial, sans-serif

mono is the default for both built-in presets. Column types and key markers line up in a monospace face, which is most of what an ERD is made of. default is Mermaid's own stack, for output that should look like every other Mermaid diagram in your documentation.

An unknown name fails, listing what exists:

   ERROR  Unknown font [comic]. Available fonts: mono, sans, default.

SVG and PNG resolve fonts differently

An SVG references the whole stack and the viewer falls through it, so a reader without JetBrains Mono still gets Consolas or their default monospace.

A PNG rasterizes at export time with whatever fonts the rendering machine has. The later entries in a stack are what actually shows up on a CI runner, which usually has none of the named faces installed. If a PNG must match a specific face, install it on the machine that renders.

Your own presets

Define a preset under themes and select it by name exactly like a built-in:

'themes' => [
    'midnight' => [
        'themeVariables' => [
            'background' => '#11131a',
            'mainBkg' => '#1c2029',
            'primaryBorderColor' => '#2f3742',
            'textColor' => '#e6edf3',
            'lineColor' => '#6e7681',
        ],
        'font' => 'sans',
    ],
],
php artisan cartographer:erd --format=svg --theme=midnight

themeVariables is required and is passed to Mermaid as given, so any variable Mermaid understands works. font is optional and defaults to mono.

Reusing a built-in name replaces it outright rather than merging into it. A preset named light replaces the built-in light theme, including for runs that never pass --theme:

'themes' => [
    'light' => [
        'themeVariables' => ['background' => '#fdfdfd', 'textColor' => '#111111'],
    ],
],

An unknown theme lists everything available, built-ins and your own together:

   ERROR  Unknown theme [solarized]. Available themes: dracula, light, midnight.

The background variable does double duty

A PNG has no transparency to fall back on, so the canvas it rasterizes against comes from the preset: background if set, then mainBkg, and otherwise the renderer's own default.

A preset with neither leaves a dark diagram rasterized onto a white page, which is the one failure worth knowing about when writing your own. Set background.

Reference

OptionConfig keyDefaultApplies to
--themeexport.themelightsvg, png
--fontexport.fontthe theme's ownsvg, png
nonethemes[]svg, png

Validation runs when the command runs:

MessageCause
[cartographer.themes] must be an array keyed by theme name.The key is not an array
[cartographer.themes] must be keyed by non-empty theme names.A key is empty or not a string
[cartographer.themes.midnight.themeVariables] must be an array of Mermaid theme variables.The key is missing or not an array
[cartographer.themes.midnight.themeVariables] must map variable names to strings.A variable name or value is not a string
[cartographer.themes.midnight.font] must be one of: mono, sans, default.An unknown font on a preset

What to read next

  • Exporting images for the renderer these presets are handed to.
  • Configuration for export and themes beside every other key.
  • Diagram syntax for what the rendered shapes mean.
PreviousExporting imagesNextRenderer limits
View source

On this page

  1. Themes never enter the source
  2. The built-in presets
  3. light
  4. dracula
  5. Font stacks
  6. SVG and PNG resolve fonts differently
  7. Your own presets
  8. The background variable does double duty
  9. Reference
  10. What to read next