Model: Claude Sonnet-4 (2025-05-14) via Roo

A JavaScript/TypeScript library for parsing and rendering server rack diagrams from RackML XML or text markup. Created with Roo and

# Configure npm to use GitHub Packages for @aurora scope
echo "@aurora:registry=https://npm.pkg.github.com" >> ~/.npmrc

# Install the package
npm install @aurora/rack-visualization-js

To install from GitHub Packages, you need to authenticate with a GitHub personal access token:

1. Create a personal access token with read:packages permission
2. Add it to your .npmrc file:

   //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
   

Or authenticate via npm login:

npm login --scope=@aurora --registry=https://npm.pkg.github.com

import { RackVisualization } from '@aurora/rack-visualization-js';

const rackViz = new RackVisualization();

// Parse RackML XML and generate SVG
const rackmlContent = `
<racks>
  <rack name="Server Rack 1" height="42">
    <server height="2">Web Server 1</server>
    <switch>Network Switch</switch>
    <server height="2">Database Server</server>
  </rack>
</racks>
`;

const svgContent = rackViz.parseRackMLAndGenerateSvg(rackmlContent);

// Parse text markup and generate SVG
const textContent = `
caption: My Server Rack
height: 42
items:
- server[2]: Web Server 1
- switch: Network Switch
- server[2]: Database Server
`;

const svgFromText = rackViz.parseTextMarkupAndGenerateSvg(textContent);

import { 
  RackMLParser, 
  TextMarkupParser, 
  SvgGenerator, 
  RackSet 
} from '@aurora/rack-visualization-js';

// Use separate parser
const rackSet: RackSet = RackMLParser.parseRackML(rackmlContent);

// Use SVG generator
const svgGenerator = new SvgGenerator();
const svg = svgGenerator.generateSvg(rackSet);

// Use text parser
const textParser = new TextMarkupParser(textContent);
const rackSetFromText = textParser.parse();

<racks id="optional-id" base="optional-base-url">
  <rack name="Rack Name" height="42">
    <server height="2" href="link" color="#ff0000">Server Name</server>
    <switch at="5">Switch at position 5</switch>
    <storage height="4">Storage Array</storage>
    <gap height="2"/>
  </rack>
</racks>

id: optional-id
caption: Rack Name
height: 42
items:
- server[2]: Server Name
- switch: Switch Name
- storage[4]: [Storage Array](http://example.com)

• server - Server
• switch - Network Switch
• firewall - Firewall
• router - Router
• storage - Storage System
• pdu - Power Distribution Unit
• ups - Uninterruptible Power Supply
• patch - Patch Panel
• cables - Cable Management
• tape - Tape Drive
• monitor - Monitor
• keyboard - Keyboard
• kvm - KVM Switch
• blank - Blank Unit
• gap - Gap (XML only)

Main class for simple usage.

• parseRackMLAndGenerateSvg(rackmlContent: string): string - Parses RackML XML and generates SVG
• parseTextMarkupAndGenerateSvg(textContent: string): string - Parses text markup and generates SVG
• generateSvg(rackSet: RackSet): string - Generates SVG from RackSet

Parser for RackML XML format.

• static parseRackML(rackmlContent: string): RackSet - Parses RackML XML

Parser for text markup format.

• constructor(content: string) - Creates parser with content
• parse(): RackSet - Parses the content

Generator for SVG output.

• generateSvg(rackSet: RackSet): string - Generates SVG from RackSet

MIT