Repository navigation
Conversation
Replaces the earlier flowchart implementation (Markdown description mode, 14 shapes, two-row toolbar) with a smaller one built on main. The tree now differs from main only by this feature. - A step can have one flowchart. The canvas toolbar's Image/Flowchart menu (far right) swaps the image tools for flowchart tools: select, step box, decision, start/end, connect, arrange, delete. The flowchart canvas has a dotted grid; shapes snap to it. - "Instead of image" or "As a block" chooses where exports put it. - Exports draw the same SVG (via Sharp) as a step image or a block in HTML, Markdown, Wiki.js, PDF, Word, Confluence and clipboard; JSON keeps the graph. - AI -> Create a flowchart drafts one from the guide; MCP set_flowchart lets agents create, replace or remove one. - Description toolbar: Step (beside Clear) inserts a "Step 3" link that keeps the target's permanent ID and is renumbered in the editor and in exports. - The image toolbar is back to main's single row.
Twest2
changed the title
- More shapes palette with 30 shapes (rectangle, circle, cylinder, cloud, document, cube, person, block arrows and more); drawn by core/flowchart.js for the editor, the palette icons and exports alike. - Fill, border and text colors through the annotation color menus. - Choose image... puts a picture in a shape, clipped to it and never stretched (Fit inside or Fill shape); stored as a scaled-down data URL. - Resize a selected shape from its corner handle. - Arrow styles: arrow, double, line, dashed and dotted. - Ctrl + mouse wheel (and Ctrl+= / Ctrl+- / Ctrl+0) zooms the flowchart. - Remove the Delete shape and Remove flowchart buttons from the details pane.
… panning - Description: a Rich text / Markdown menu. Markdown is CommonMark with GitHub tables, strikethrough, autolinks and task lists, kept line breaks and inline HTML (sanitized; images become links). Preview turns blue while on. Switching converts in both directions. The Markdown source is kept while it still produces the stored HTML; when AI, an agent, Find and replace or the private-detail check rewrites the HTML, the source is rebuilt from it. Markdown exports use the source as written. - Pin markdown-it 14.3.3; core/sanitize.js also loads in the renderer, and allows h5, h6, del, ins, mark, kbd, dl/dt/dd and details/summary. - Flowchart Fill menu: Image... (with an image icon) puts a picture in the shape; Fit inside / Fill shape and Remove image show while it has one. - Shape menu and More shapes palette grouped: Basic, Flowchart, More. - Drag empty canvas (or middle-drag) to pan the flowchart.
…iew links - Rich text turns a typed [text](https://...) into a real link once the caret leaves it, and a bare web address once a space follows it. The Link button selects its placeholder so the address can be typed straight away. - Links in the rich-text box show blue; Ctrl+click opens them (plain click keeps editing). Links in the Markdown preview open on click. - The rich-text box, Markdown box and preview can be dragged taller; the preview opens at the Markdown box's size.
- Rich text and Markdown link example.com, www.example.com and [text](example.com) to https://, using markdown-it's linkify (with common newer endings such as .dev and .app). File names like file.txt stay text. - A Markdown description stores a fingerprint of the HTML it produced, so a later change to the Markdown renderer never rebuilds the author's source; a real rewrite of the HTML (AI, Find and replace, private details) still does.
…lbar shapes
- Mermaid button (top right of the canvas) opens the chart as Mermaid text
in a panel beside it, split by a vertical line. Typing Mermaid redraws the
chart (one undo step per visit); drawing rewrites the text. Existing shapes
keep position, size, colors, picture, step link and shapes Mermaid lacks;
new ones go under the node leading to them. Unreadable lines are named.
core/flowchart-mermaid.js reads brackets, @{ shape } nodes, arrows, labels,
chains and &, and skips comments, styles and subgraphs.
- More shapes gains Lines and arrows: Connect then draws that style.
- Ellipse, Document and Cylinder join the toolbar.
- Placement menu reads Main visual / Block.
- Mermaid is a text button in the flowchart toolbar that opens and closes the panel (shown pressed while open), instead of a button on the canvas. - The panel has a title and subtitle, a Syntax link to Mermaid's flowchart guide, an icon close button, a code-style editor and a status bar (green in sync, red with the line it can't read).
- A divider between the canvas and the Mermaid panel drags (or arrow keys) to resize it; the width is remembered (editor.mermaidWidth). - The Mermaid text is colored with Settings -> Exports -> Code theme, background included (Plain leaves it uncolored). A small tokenizer in core/flowchart-mermaid.js names keywords, directions, nodes, arrows, shapes, labels, strings and comments; core/code-themes.js also loads in the renderer. Changing the theme recolors an open panel. - Leaving the Mermaid box keeps the text as typed (comments included).
…d beside), two-way arrows drawn apart
… don't pull in musl sharp
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue
Relates to #188.
Summary
Recorded guides sometimes branch ("Already have an account?"). A step can now have a simple flowchart, either shown instead of its screenshot or as a block after its text, and descriptions can link to another step by number.
This revision replaces the first attempt on this branch with a smaller version built on main. The Markdown description mode, extra shapes/connector styles and the two-row toolbar are gone; the image toolbar is exactly main's again.
Changes
markdown-it@14.3.3.href="step:<id>"). The editor and every export show the target's current number. Ctrl+click opens the step.core/flowchart.js) draws both the editor and the exports; Sharp turns it into a PNG. It replaces the step image, or is added as a block, in HTML, Markdown, Wiki.js, PDF, Word, Confluence and clipboard. JSON keeps the graph.set_flowchartlets agents create, replace or remove a step's flowchart (snapshot first).Area
Testing
Short checks, as requested for the development stage:
npm test: 1,490 passed, 0 failed, 24 skipped (newtests/unit/flowcharts.test.js: model, layout, SVG escaping, AI parsing, export placement with real Sharp rendering, step-link renumbering, MCP tool).node scripts/check-translations.js: 1851/1851 in all five languages.bash tests/run_test.sh/ the E2E suite, the live-model AI path, Windows.Screenshots or recordings
Editor (flowchart mode):
Exported flowchart:
Rollout notes
Steps gain two fields,
flowchart(null by default) andflowchartPlacement. Older steps load unchanged.Checklist
t(), andnpm run translationslists nothing missingmarkdown-itfor full Markdown descriptions)