Finsteps Plugin

Declarative Reveal.js Integration

Diagrams auto-initialize using data-finsteps attributes. No manual JavaScript required!

Basic Usage

flowchart LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[Skip]
  C --> E[End]
  D --> E

Use the controls to navigate through diagram steps.

Custom Controls Position

flowchart TD
  S[Client] --> A[API Gateway]
  A --> B{Auth Check}
  B -->|Valid| C[Service]
  B -->|Invalid| D[Error]
  C --> E[Response]

Controls positioned at bottom-left with light theme.

Fragment Synchronization

flowchart LR
  A[Phase 1] --> B[Phase 2]
  B --> C[Phase 3]
  C --> D[Complete]

With syncWithFragments: true, pressing space/arrow advances both Reveal.js fragments and diagram steps together.

Multiple Diagrams

flowchart TB
  A[Input] --> B[Process]
  B --> C[Output]

flowchart TB
  X[Request] --> Y[Handler]
  Y --> Z[Response]

Each diagram has independent controls and state.

HTML API Summary

<div data-finsteps
     data-finsteps-controls="bottom-right"
     data-finsteps-controls-size="compact"
     data-finsteps-controls-theme="dark">
  <pre class="finsteps-mermaid">
    flowchart LR; A-->B
  </pre>
  <script type="application/finsteps+json">
    {"steps": [...]}
  </script>
</div>