@haikal-fikri/archimate 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Haikal Fikri
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,92 @@
+# @haikal-fikri/archimate
+
+ArchiMate Open Exchange XML viewer for React — parser plus SVG renderer with full ArchiMate 3.2 notation. Read-only, stateless, dependency-light.
+
+Supports both ArchiMate **3.0** and **2.1** Open Exchange XML.
+
+## Install
+
+```sh
+npm install @haikal-fikri/archimate react
+```
+
+`react` is a peer dependency (`^18 || ^19`).
+
+## Usage
+
+```tsx
+import { parseArchimate, ArchimateRenderer } from '@haikal-fikri/archimate'
+
+const xml = await fetch('/archisurance.xml').then((r) => r.text())
+const view = parseArchimate(xml) // first view in the model
+
+return <ArchimateRenderer view={view} style={{ width: '100%', height: 600 }} />
+```
+
+To render a specific view by identifier:
+
+```ts
+const view = parseArchimate(xml, 'id-4056')
+```
+
+## Features
+
+- **Open Exchange XML 2.1 + 3.0** — namespace-tolerant parser, handles British/American spelling differences, `Infrastructure*` → `Technology*` rename, both `<views><view>` and `<views><diagrams><view>` layouts
+- **Full element notation** — rounded rects, stadiums (Service), junctions, motivation chamfers, plus per-type icon glyphs (Actor, Process, Component, Service, Node, Device, etc.)
+- **All relationship arrowheads** — Composition (filled diamond), Aggregation (hollow diamond), Realization (dashed + hollow triangle), Specialization (solid + hollow triangle), Triggering, Flow, Serving, Used-By, Influence, Access (with Read/Write/ReadWrite), Assignment
+- **Smart edge routing** — orthogonal snap when boxes share an axis, rectangle-edge intersection on diagonals, automatic distribution of multiple edges sharing the same node side
+- **Word-wrapped labels** — automatic multi-line tspan wrapping into the available width
+- **Pan + zoom** — drag to pan, wheel/pinch to zoom; programmatic `fit()` / `reset()` via ref handle
+- **Inline marker glyphs** — markers rendered as transformed siblings, not via `<marker>`, so dashed lines never bleed into arrowhead outlines
+- **Layer-correct colors** — ArchiMate standard yellow / blue / green / lavender / orange palette built in
+
+## API
+
+### `parseArchimate(xml: string, viewId?: string): ParsedView`
+
+Parses Open Exchange XML and returns one view's geometry. Throws `ArchimateParseError` (with `kind`) on:
+
+- `'invalid-xml'` — malformed XML
+- `'wrong-format'` — namespace not Open Exchange (e.g. native `.archimate` file)
+- `'no-views'` — model has no views
+- `'view-not-found'` — `viewId` doesn't match any view
+
+If `viewId` is omitted, returns the first view.
+
+### `<ArchimateRenderer view={view} ... />`
+
+Props:
+
+- `view: ParsedView` — required
+- `className?: string`
+- `style?: CSSProperties`
+
+The component sizes itself via the consumer's CSS — set `width` / `height` on the SVG (or its container) to whatever fits your layout. The diagram's aspect ratio is preserved automatically.
+
+`forwardRef` exposes `ArchimateRendererHandle` for programmatic control:
+
+```ts
+type ArchimateRendererHandle = {
+  zoomIn: () => void
+  zoomOut: () => void
+  fitView: () => void
+  pan: (dirX: number, dirY: number) => void
+}
+```
+
+### Other exports
+
+- `LAYER_COLORS`, `colorForType(elementType)` — the color palette
+- `ICONS`, `iconNameForType(elementType)` — icon glyph map
+- Types: `ParsedView`, `NodeBox`, `Edge`, `Point`, `AccessType`, `IconDef`
+
+## What's not supported (yet)
+
+- Editing — read-only viewer
+- Native `.archimate` files — only the standard Open Exchange XML format
+- Influence relationship `+` / `-` modifier labels
+- Real-time updates / collaborative editing
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+type RGB = string;
+type NodeBox = {
+    id: string;
+    elementId?: string;
+    elementType?: string;
+    nodeType?: string;
+    isJunction: boolean;
+    label: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    fill: RGB;
+    stroke: RGB;
+    textColor: RGB;
+    fontFamily?: string;
+    fontSize?: number;
+};
+type Point = {
+    x: number;
+    y: number;
+};
+type AccessType = 'Access' | 'Read' | 'Write' | 'ReadWrite';
+type Edge = {
+    id: string;
+    sourceId: string;
+    targetId: string;
+    relationshipType?: string;
+    accessType?: AccessType;
+    isDirected?: boolean;
+    name?: string;
+    bendpoints: Point[];
+    stroke?: RGB;
+};
+type ParsedView = {
+    viewId: string;
+    viewName: string;
+    viewBox: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    nodes: NodeBox[];
+    connections: Edge[];
+};
+
+type ArchimateParseErrorKind = 'invalid-xml' | 'wrong-format' | 'no-views' | 'view-not-found';
+declare class ArchimateParseError extends Error {
+    readonly kind: ArchimateParseErrorKind;
+    constructor(message: string, kind: ArchimateParseErrorKind);
+}
+declare function parseArchimate(xml: string, viewId?: string): ParsedView;
+
+type ArchimateRendererHandle = {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    fitView: () => void;
+    pan: (dirX: number, dirY: number) => void;
+};
+type Props = {
+    view: ParsedView;
+    className?: string;
+    style?: CSSProperties;
+};
+declare const ArchimateRenderer: react.ForwardRefExoticComponent<Props & react.RefAttributes<ArchimateRendererHandle>>;
+
+declare const LAYER_COLORS: Record<string, string>;
+declare function colorForType(elementType?: string): string;
+
+type IconDef = {
+    /** Path data strings in the 0..100 local coord system. Stroked, not filled. */
+    outline?: string[];
+    /** Path data strings drawn filled with currentColor (no stroke). */
+    filled?: string[];
+};
+declare const ICONS: Record<string, IconDef>;
+declare function iconNameForType(elementType?: string): string | null;
+
+export { type AccessType, ArchimateParseError, type ArchimateParseErrorKind, ArchimateRenderer, type ArchimateRendererHandle, type Edge, ICONS, type IconDef, LAYER_COLORS, type NodeBox, type ParsedView, type Point, colorForType, iconNameForType, parseArchimate };