mermaid-tam

TAM (Technical Architecture Modeling) Component/Block Diagram support for Mermaid.

This package adds TAM diagram capabilities to Mermaid, allowing you to create FMC-style block diagrams using text-based syntax.

Installation

npm install mermaid @dsrednicki/mermaid-tam

Usage

HTML

<script type="module">
  import mermaid from 'mermaid';
  import tam from '@dsrednicki/mermaid-tam';

  await mermaid.registerExternalDiagrams([tam]);
  mermaid.initialize({ startOnLoad: true });
</script>

<pre class="mermaid">
tam
  title My Architecture

  human User
  agent WebApp
  storage Database

  User --> WebApp
  WebApp --> Database
</pre>

JavaScript/TypeScript

import mermaid from 'mermaid';
import tam from '@dsrednicki/mermaid-tam';

async function init() {
  await mermaid.registerExternalDiagrams([tam]);

  const { svg } = await mermaid.render('diagram1', `
    tam
      agent Client
      agent Server
      Client --> Server
  `);

  document.getElementById('output').innerHTML = svg;
}

init();

Syntax

Elements

tam
  agent AgentName        # Active component (rectangle)
  storage StorageName    # Data store (rounded rectangle)
  human ActorName        # Human actor (stick figure)

Connections

tam
  agent A
  agent B

  A --> B                 # Simple connection
  A --(R)--> B            # Request channel
  A --(M)--> B            # Modifying channel
  A --(RM)--> B           # Bidirectional channel
  A --> B: label          # Labeled connection

Nesting

tam
  agent Parent {
    agent Child
    storage Data
    Child --> Data
  }

Direction

tam
  direction LR  # Left to Right (default is TB - Top to Bottom)

  agent A
  agent B
  A --> B

Title and Accessibility

tam
  title My Architecture Diagram
  accTitle: Accessible title
  accDescr: Description for screen readers

TAM Notation

TAM diagrams follow FMC (Fundamental Modeling Concepts) block diagram notation:

• Agents (rectangles): Active components that perform actions
• Storages (rounded rectangles): Passive data stores
• Humans (stick figures): Human actors
• Channels: Communication pathways
  • R = Request (read access)
  • M = Modifying (write access)

Development

# Install dependencies
npm install

# Build
npm run build

# Run tests
npm test

# Watch mode
npm run dev

License

MIT