The regex literal in #105 got its backslashes consumed by the
surrounding template literal, producing "//index.html$|/$/" in the
deployed output. The "//" was parsed as a line comment, breaking the
entire inline <script type="module"> block with a syntax error and
disabling all client-side interactions (Editor link, Random Theme,
theme pills, mega-menu).
Replaced with endsWith/slice equivalent. Added a comment explaining
the template-literal interpolation pitfall to prevent the same
mistake on future inline scripts.
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
The relative href="editor" broke when the page URL had no trailing
slash (e.g. agents.craft.do/mermaid). The browser resolved it as a
sibling of the "mermaid" file, sending users to /editor on the
parent host instead of /mermaid/editor.
Now the script strips a trailing slash or /index.html from
location.pathname and appends "/editor", which works for:
/ → /editor
/index.html → /editor
/mermaid → /mermaid/editor
/mermaid/ → /mermaid/editor
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
The <button> element (Random Theme) was rendering at a slightly
different height than the <a> buttons because browsers apply
different user-agent defaults for line-height and box-sizing on
<button> vs <a>. Setting both explicitly forces all four to the
same rendered size.
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
- Adds a third secondary button linking to the live editor (relative
href so it works under both / and /mermaid/ deploys).
- Switches .hero-buttons align-items from flex-start to center to
remove subtle vertical drift between <a> and <button> elements.
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
The deploy pipeline only ran index.ts, so the live editor added in #97
never shipped to craft-agents-mermaid.pages.dev. Renamed build:samples
to build:site, added editor.ts to the build, and moved both index.html
and editor.html into site/ before deploy.
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
- Theme system: set CSS vars on :root, derive all colors via color-mix()
with solid mixes (bg-based, never transparent). 4-tier text hierarchy
(fg/fg2/fg3/fg4), split surface/hover levels.
- Theme dropdown: no item transitions, cursor:default, 4px item radius,
5% fg hover tint, checkmark via ::after pseudo-element for active state.
- Export dropdown: same treatment (4px radius, 5% hover, no transitions).
- Preview panel: replaced header bar with floating toolbar — 'Preview'
label (11px uppercase muted) on left, zoom controls in shadow-minimal
pill on right. Toolbar-btn matches Craft's PanelHeaderCenterButton
(opacity 0.5→1 on hover).
- Source panel: floating toolbar with 'Source' label + copy/trash buttons,
hidden when Config tab is active.
- Config panel: section titles now match Craft SettingsSection style
(14px semibold normal-case) instead of uppercase micro-labels.
- Fixed init crash: moved applyColorMode() to init.js after all DOM refs
and functions are ready.
- Fixed theme application: set vars on document.documentElement (not body)
so :root color-mix() expressions resolve correctly.
- All themes (Default, Catppuccin, Tokyo Night, Nord, Dracula, etc.)
apply to full page chrome, not just diagrams.
Adds a live in-browser Mermaid editor alongside the existing samples
showcase, served by the existing dev server.
- Live editor under editor/ (modular CSS/JS: topbar, left/right panels,
color + font pickers, samples, export, sharing, zoom/pan) wired through
editor.ts.
- dev.ts: kept close to the original; / still serves the samples showcase,
/editor serves the new editor, both get live reload via SSE.
- package.json gets an editor script.
- Architecture/change guide at .agents/skills/editor.md.
Scoped strictly to editor/infra - no changes under src/.
Made-with: Cursor
getSeriesColor() assumed hex color inputs but broke with CSS variable
refs like var(--accent), producing #NaNNaNNaN for series 1+ colors.
Now falls back to the default blue accent for color math when inputs
aren't valid hex.
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
- Add tsup build step (ESM + declarations)
- Dual exports: Bun gets raw .ts, Node/webpack/vite get built .js
- Fix build:samples/deploy to use site/ (dist/ now for npm)
- Closes#45
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
* Add xychart-beta diagram support
Implement full parse → layout → render pipeline for Mermaid xychart-beta
diagrams including bar charts, line charts, combinations, horizontal mode,
multi-series with legends, and Chart.js-aligned proportions and palettes.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Add interactive hover tooltips for xychart data points
- Add 'interactive' option to RenderOptions
- Render CSS-based tooltips on bars and line points
- Pass category labels as data attributes for tooltip display
- Add integration tests and example SVGs
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
* adding xycharts to sample ts
* progress with deisgning charts
* Added ASCII bar charts
* Add XY Charts documentation to README
- Update feature count from 5 to 6 diagram types
- Add XY Charts section with bar, line, combined, and horizontal examples
- Document axis configuration options (categorical, numeric, titles, ranges)
- Add XY Chart Styling section covering dot grid, rounded bars, smooth
cubic spline curves, floating labels, monochromatic palette, interactive
tooltips, and live theme switching via CSS custom properties
- Add ASCII XY Charts section documenting Unicode/ASCII block characters,
staircase line routing, multi-series ANSI colors, and legend support
- Add `interactive` option to API Reference RenderOptions table
- Note xychart-beta auto-detection in API docs
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
* Improve XY Charts: multi-series colors, tooltips, theme switching, ASCII rendering
- Add shared color palette (colors.ts) with monochromatic series shades
derived from accent color with hue drift, adapting to light/dark backgrounds
- Refactor SVG renderer: dot grid background, rounded bars, smooth cubic
spline curves, drop-shadow lines, interactive hover tooltips
- Support live theme switching for charts via CSS custom properties
(--xychart-color-N) and data-xychart-colors attribute
- Improve ASCII xychart: multi-series colors, per-cell hex overrides,
staircase line routing with rounded corners, legend support
- Export getSeriesColor and CHART_ACCENT_FALLBACK from browser bundle
for client-side theme-switching of chart series colors
- Fix ASCII theme re-render targeting (ascii-N index correction)
- Update layout with dynamic y-axis label width and legend positioning
- Update samples and test data
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
* Fix sequence diagram note overlap and improve note styling
Notes now position below self-message loops instead of inside them,
stack vertically when consecutive, and push subsequent messages down.
Note boxes use bg fill with dog-ear corner, content-fitted widths,
and increased label-to-arrow spacing.
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
* Fix TypeScript strict null errors in xychart modules
Add non-null assertions for array indexing patterns where indices are
guaranteed valid by loop bounds. Fixes CI tsc --noEmit failures.
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Craft Agent <agents-noreply@craft.do>
Co-authored-by: Balint Orosz <balint.orosz@gmail.com>
- Fix stateDiagram parser regexes to support Unicode (CJK/Japanese/Korean)
state names using \p{L} character class (closes#43)
- Add text-embedded edge label syntax: `-- Yes -->`, `-. Maybe .->`,
`== Sure ==>` as fallback to pipe syntax (closes#32)
Based on PR #36 by @liuxiaopai-ai — thank you!
- Add linkStyle, CJK, and text-embedded label samples to gallery
- Add 12 new parser tests
Co-authored-by: Craft Agent <agents-noreply@craft.do>
Replace the "DOM" tsconfig lib workaround with module-scoped
`declare const` for the two browser globals (document, window).
This avoids pulling in the entire DOM type namespace for a library
that has zero DOM dependencies.
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
- Add IIFE build target in tsup.config.ts that bundles all dependencies
- Update browser.ts to export all public APIs (renderMermaid, renderMermaidAscii, THEMES, etc.)
- Add unpkg and jsdelivr fields to package.json for automatic CDN support
- Document script tag usage in README with examples for both CDNs
Usage: <script src="https://unpkg.com/beautiful-mermaid/dist/beautiful-mermaid.browser.global.js"></script>
Exposes window.beautifulMermaid with all public APIs.
Apply escapeXml() to user-controlled inlineStyle properties (fill, stroke,
stroke-width, color) before interpolating into SVG attributes, preventing XSS via attribute breakout and element injection.
Mermaid syntax allows semicolons as statement separators (e.g.
`graph LR; A --> B --> C`), but the parser only split on newlines,
causing the entire input to be treated as a single line. The header
regex then failed because it saw content after the direction keyword.
Split on both newlines and semicolons in parseMermaid() and
detectDiagramType().
- Remove broken anchor links from header navigation
- Fix attribution: mermaid-ascii is written in Go, not Python
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
MIT licensed mermaid diagram renderer with SVG + ASCII output.
15 built-in themes, full Shiki compatibility, zero DOM dependencies.
Co-Authored-By: Craft Agent <agents-noreply@craft.do>
Gyula Halmos