Create interactive flow diagrams from markdown.
Write markdown:
## Welcome
This is the starting point of your journey.
[Get Started](Step 2)
## Step 2
You're making progress!
[Continue](Complete) [Go Back](Welcome)
## Complete
You've reached the end.
[Restart](Welcome)
Build it:
npm run journeyscript simple.md
Get: An interactive, pannable, zoomable HTML diagram with automatic graph layout.
Open simple.html in your browser to see your flow diagram come to life!
npm install journeyscript
JourneyScript uses simple markdown conventions to create flow diagrams:
Any heading creates a step in your diagram:
## Welcome
## Step 2
### Substep
step-2)Markdown links create arrows between steps:
[Get Started](Step 2) <!-- Creates arrow to "Step 2" -->
[Visit Docs](https://...) <!-- External links stay as links -->
Use standard markdown in your steps:
## My Step
This is **bold** and this is *italic*.
- Item 1
- Item 2
[Next](Another Step)
Supports: bold, italic, code, lists, images, code blocks, and HTML.
# Convert markdown file to HTML
npm run journeyscript myflow.md
# Creates myflow.html in the same directory
# Specify custom output file
npm run journeyscript myflow.md -o custom-name.html
npm run journeyscript myflow.md --output custom-name.html
# Read from stdin and write to file
cat myflow.md | npm run journeyscript -- -o output.html
echo "## Step 1..." | npm run journeyscript -- -o journey.html
# Read from stdin and write to stdout (for piping)
cat myflow.md | npm run journeyscript > output.html
cat myflow.md | npm run journeyscript | less
Note: When using npm scripts, use -- before flags to pass them through to the underlying command.
If installed globally or via npx:
# Basic usage
journeyscript myflow.md
# Custom output
journeyscript myflow.md -o output.html
# From stdin
cat myflow.md | journeyscript -o output.html
cat myflow.md | journeyscript > output.html
The generated HTML file is self-contained with:
JourneyScript can also be used as a JavaScript library to create journey visualizations programmatically. See docs/API.md for the full API reference.
Quick example:
<div class="journey-viewport">
<div class="journey-container">
<div class="step" id="start" data-place="start">
<h2>Start</h2>
<button data-dest="next">Next</button>
</div>
<div class="step" id="next">
<h2>Next Step</h2>
</div>
</div>
</div>
<script type="module">
import { JourneyVisualizer } from 'journeyscript';
const visualizer = new JourneyVisualizer('.journey-container');
visualizer.init();
</script>
npm run build # Builds dist/journey-visualizer.umd.js
npm test # Run all tests
npm run test:watch # Watch mode
MIT