Meta Post - Common CSS Hacks

Oversize your Mermaid Gantt chart

v1.1.9 Compatible

:root {
    --mermaid-gantt-text-fill: yellow;
}
.taskText, .taskTextOutsideRight, .taskTextOutsideLeft {
    fill: var(--mermaid-gantt-text-fill) !important;
    text-shadow: 0px 0px 2px rgb(0 0 0  / 80%) !important;
}
.exclude-range {
    fill: #888 !important;
}
.mermaid svg {
    max-width: 200% !important;
    width: 200% !important;
    height: auto;
    transform: translate(calc(-0.25 * 100%), 0) !important;
  }
text.titleText {
    fill: var(--mermaid-gantt-text-fill) !important;
}

You can’t see it from the screen shot, but this is scaled to 200% in Obsidian when rendered.

from: Ability to resize and align mermaid diagrams - #34 by Durant

2 Likes