Interactive Hotspots
Hover over diagram elements to see detailed explanations in tooltips.
Easy Integration
Just include a script tag and call DiagramNotes.render() - like AuthReturn.
Mermaid Compatible
Works with any Mermaid diagram: sequence, flowchart, class, etc.
Usage
<script src="https://diagram-notes.aisloppy.com/static/diagram-notes.js"></script>
<div id="my-diagram"></div>
<script>
DiagramNotes.render({
container: 'my-diagram',
diagram: `
sequenceDiagram
participant U as User
participant A as App
U->>A: Request
A-->>U: Response
`,
notes: {
'User': 'The end user interacting with the system',
'App': 'Your application backend',
'Request': 'An API call or user action',
'Response': 'Data returned to the user'
}
});
</script>