ariel-rs 0.2.0

A faithful Rust port of Mermaid JS — headless SVG diagram rendering without a browser
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

//! SVG template functions for the architecture renderer.
//!
//! Each function takes typed parameters and returns a `String`.
//! No rendering logic lives here — only string formatting.
#![allow(dead_code)]

// ---------------------------------------------------------------------------
// Utilities
// ---------------------------------------------------------------------------

pub use crate::diagrams::util::{esc, fmt};

// ---------------------------------------------------------------------------
// Top-level SVG structure
// ---------------------------------------------------------------------------

/// Render the outer SVG wrapper for an architecture diagram.
pub fn svg_root(max_w: f64, vb_x: f64, vb_y: f64, vb_w: f64, vb_h: f64) -> String {
    format!(
        "<svg id=\"mermaid-svg\" width=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"max-width: {}px;\" viewBox=\"{} {} {} {}\" role=\"graphics-document document\" aria-roledescription=\"architecture\">",
        max_w, vb_x, vb_y, vb_w, vb_h,
    )
}

/// Render the CSS `<style>` block for an architecture diagram.
pub fn style_block(ff: &str) -> String {
    format!(
        concat!(
            "<style>",
            "#mermaid-svg{{font-family:{ff};font-size:16px;fill:#333;}}",
            "#mermaid-svg .edge{{stroke-width:3;stroke:#333333;fill:none;}}",
            "#mermaid-svg .arrow{{fill:#333333;}}",
            "#mermaid-svg .node-bkg{{fill:none;stroke:hsl(240, 60%, 86.2745098039%);stroke-width:2px;stroke-dasharray:8;}}",
            "#mermaid-svg .node-icon-text{{display:flex;align-items:center;}}",
            "#mermaid-svg p{{margin:0;}}",
            "</style>",
        ),
        ff = ff,
    )
}

// ---------------------------------------------------------------------------
// Group (container) rendering
// ---------------------------------------------------------------------------

/// Render the dashed container rectangle for a group.
pub fn group_rect(id: &str, x: f64, y: f64, w: f64, h: f64) -> String {
    format!(
        "<rect id=\"mermaid-svg-group-{id}\" x=\"{x}\" y=\"{y}\" width=\"{w}\" height=\"{h}\" class=\"node-bkg\"></rect>",
        id = id, x = x, y = y, w = w, h = h,
    )
}

/// Render the icon + label group for a group that has an icon.
pub fn group_icon_and_label(
    icon_x: f64,
    icon_y: f64,
    inner: &str,
    label_tx: f64,
    label_ty: f64,
    text: &str,
) -> String {
    format!(
        "<g><g transform=\"translate({ix}, {iy})\"><g><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 80 80\"><g>{inner}</g></svg></g></g><g dy=\"1em\" alignment-baseline=\"middle\" dominant-baseline=\"start\" text-anchor=\"start\" transform=\"translate({tx}, {ty})\"><g><rect class=\"background\" style=\"stroke: none\"></rect><text y=\"-10.1\" style=\"\"><tspan class=\"text-outer-tspan row\" x=\"0\" y=\"-0.1em\" dy=\"1.1em\"><tspan font-style=\"normal\" class=\"text-inner-tspan\" font-weight=\"normal\">{text}</tspan></tspan></text></g></g></g>",
        ix = icon_x, iy = icon_y, inner = inner,
        tx = label_tx, ty = label_ty, text = text,
    )
}

/// Render the plain text label for a group that has no icon.
pub fn group_plain_label(tx: f64, ty: f64, text: &str) -> String {
    format!(
        "<g dy=\"1em\" alignment-baseline=\"middle\" dominant-baseline=\"start\" text-anchor=\"start\" transform=\"translate({tx}, {ty})\"><g><rect class=\"background\" style=\"stroke: none\"></rect><text y=\"-10.1\" style=\"\"><tspan class=\"text-outer-tspan row\" x=\"0\" y=\"-0.1em\" dy=\"1.1em\"><tspan font-style=\"normal\" class=\"text-inner-tspan\" font-weight=\"normal\">{text}</tspan></tspan></text></g></g>",
        tx = tx, ty = ty, text = text,
    )
}

// ---------------------------------------------------------------------------
// Service rendering
// ---------------------------------------------------------------------------

/// Render the opening `<g>` wrapper for an architecture service node.
pub fn service_group(id: &str, tx: f64, ty: f64) -> String {
    format!(
        "<g id=\"mermaid-svg-service-{id}\" class=\"architecture-service\" transform=\"translate({tx},{ty})\">",
        id = id, tx = tx, ty = ty,
    )
}

/// Render the label group below a service icon (in service-local coordinates).
pub fn service_label(text: &str) -> String {
    format!(
        "<g dy=\"1em\" alignment-baseline=\"middle\" dominant-baseline=\"middle\" text-anchor=\"middle\" transform=\"translate(40, 80)\"><g><rect class=\"background\" style=\"stroke: none\"></rect><text y=\"-10.1\" style=\"\"><tspan class=\"text-outer-tspan row\" x=\"0\" y=\"-0.1em\" dy=\"1.1em\"><tspan font-style=\"normal\" class=\"text-inner-tspan\" font-weight=\"normal\">{text}</tspan></tspan></text></g></g>",
        text = text,
    )
}

/// Render an 80×80 service icon SVG wrapping the given inner art.
pub fn service_icon_svg(inner: &str) -> String {
    format!(
        "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"80\" height=\"80\" viewBox=\"0 0 80 80\"><g>{inner}</g></svg>",
        inner = inner,
    )
}

// ---------------------------------------------------------------------------
// Edge rendering
// ---------------------------------------------------------------------------

/// Render an architecture edge `<path>` element.
pub fn edge_path(path: &str, lhs: &str, rhs: &str) -> String {
    format!(
        "<path d=\"{path}\" class=\"edge\" id=\"mermaid-svg-L_{lhs}_{rhs}_0\"></path>",
        path = path,
        lhs = lhs,
        rhs = rhs,
    )
}

/// Render an arrowhead `<polygon>` for an architecture edge.
pub fn edge_arrow(pts: &str, t: &str) -> String {
    format!(
        "<polygon points=\"{pts}\" transform=\"{t}\" class=\"arrow\"></polygon>",
        pts = pts,
        t = t,
    )
}

/// Render an edge label `<text>` element.
pub fn edge_label(x: f64, y: f64, text: &str) -> String {
    format!(
        "<text x=\"{x}\" y=\"{y}\" text-anchor=\"middle\" font-family=\"Arial, sans-serif\" font-size=\"14\" fill=\"#333333\">{text}</text>",
        x = x, y = y, text = text,
    )
}