Skip to content

Latest commit

 

History

History
81 lines (62 loc) · 3.96 KB

README.md

File metadata and controls

81 lines (62 loc) · 3.96 KB

axure-to-mermaid

What is it

This script is designed to be used with Axure RP prototypes. It creates a toolbar with options for generating a Mermaid flowchart from your sitemap with various options for output.

How to use

As a bookmarklet

I have a pre-generated minified bookmarklet, just click the bookmarklet to activate the [toolbar](#features].

Inside an Axure shape

Note

⚠ Currently broken, trying to figure out why.

Because the bookmarklet is an IIFE, you can trigger it inside of a prototype with the Open Link action

  1. Copy the full script to your clipboard
  2. Create a new Interaction on a shape, like Click or Load
  3. Add an Open Link action
    Open Link Screenshot
  4. Set Link to: Link to external URL and for the value paste in the bookmarklet script
  5. Open the page, when you trigger the interaction, the toolbar appears

Features

axure-to-mermaid toolbar screenshot

  • Sitemap
    • Full: generates a markdown text of a flowchart of the entire sitemap tree
    • Current: generates a markdown flowchart using the currently selected page as the root node (Note: there currently is no way to use this button on a folder, that's Future Brent's problem)
  • Code
    • Copy - copies the mermaid text to your clipboard
  • Download
    • TXT - downloads text file of the mermaid chart
    • SVG - downloads svg file using Mermaid.Ink !
    • PNG - downloads png file using Mermaid.Ink !
  • URL
    • SVG - open svg file in a new tab using Mermaid.Ink !
    • PNG - open png file in a new tab using Mermaid.Ink !

Warning

Features that use Mermaid.Ink will send your chart content to a third-party server. If you want to keep things entirely private only use the Copy or TXT buttons and generate the chart yourself using Mermaid.Live, Mermaid CLI or the Mermaid JS library.

Example

This Axure Sitemap...
becomes this text...
which Generates this image

"Dependencies"

All dependency scripts are injected from CDN sources to keep bookmarklet at a reasonable size.

Prior art/inspiration

  • @samuei's subgraph technique
    • I've added styles to make the subgraphs have no visual component beyond structure
  • Mermaid.Ink service allows for the generation of mermaid chart images and PDFs with just a URL

Future Ideas

  • Make it work with the Mermaid JS library instead of Mermaid.Ink. I have mermaid chart genereation working in a plugin for myself, I wanted to try to make it work with Mermaid.Ink this time.
  • Convert Axure Flowcharts to mermaid (this actually looks pretty easy)
  • Label the Mermaid.Ink buttons better or include a warning modal the first time you click one

Contact

Brent Morris

Bluesky: @closetgeekshow.ca | Mastodon: @[email protected] | Email: [email protected]

Project Link: https://github.com/closetgeekshow/axure-to-mermaid