// JSON:API document shape — server (AMS) -> document -> client ($resource)
digraph jsonapi_shape {
    rankdir=TB;
    graph [bgcolor="white", fontname="Helvetica", fontsize=11,
           pad="0.3", nodesep="0.3", ranksep="0.35"];
    node  [shape=box, style="rounded,filled", fontname="Helvetica",
           fontsize=10, fillcolor="#f5f5f5", color="#888"];
    edge  [color="#aaa"];
    // Tailwind palette: #d36 #d63 #693 #369 #639 #963

    // Server side: Rails + ActiveModelSerializer
    subgraph cluster_server {
        label="Rails server (ActiveModelSerializer 0.10)"; labeljust="l";
        color="#d63"; fontcolor="#d63"; style="rounded";
        ctrl  [label="ArticlesController#show",          color="#d63"];
        ams   [label="ArticleSerializer\nattributes :title, :body\nhas_many :comments\nbelongs_to :author", color="#d63"];
        adapt [label="JsonApi adapter\nrender json: @article", color="#d63"];
        ctrl -> ams -> adapt [color="#d63"];
    }

    // The document itself (JSON:API 1.0 top-level members)
    subgraph cluster_doc {
        label="JSON:API response document (Content-Type: application/vnd.api+json)";
        labeljust="l"; color="#369"; fontcolor="#369"; style="rounded";

        subgraph cluster_data {
            label="data (primary resource)"; labeljust="l";
            color="#693"; fontcolor="#693"; style="rounded";
            d_type  [label="type\n\"articles\"",                color="#693"];
            d_id    [label="id\n\"1\"",                          color="#693"];
            d_attrs [label="attributes\n{ title, body }",        color="#693"];
            d_rel   [label="relationships\n{ author, comments }", color="#693"];
            d_links [label="links\n{ self }",                    color="#693"];
        }

        subgraph cluster_included {
            label="included (sideloaded)"; labeljust="l";
            color="#639"; fontcolor="#639"; style="rounded";
            i_author   [label="people/9\n(author)",   color="#639"];
            i_comment1 [label="comments/5",            color="#639"];
            i_comment2 [label="comments/12",           color="#639"];
        }

        subgraph cluster_meta {
            label="meta"; labeljust="l";
            color="#963"; fontcolor="#963"; style="rounded";
            m_total [label="total-count: 42",          color="#963"];
        }

        subgraph cluster_topLinks {
            label="links (top-level)"; labeljust="l";
            color="#d36"; fontcolor="#d36"; style="rounded";
            tl_self [label="self / next / prev",       color="#d36"];
        }

        // relationships -> included via resource linkage
        d_rel -> i_author   [color="#639", style=dashed, label="linkage"];
        d_rel -> i_comment1 [color="#639", style=dashed];
        d_rel -> i_comment2 [color="#639", style=dashed];
    }

    adapt -> d_type [color="#aaa"];

    // Client side: AngularJS $resource consumption
    subgraph cluster_client {
        label="AngularJS client ($resource + angular-jsonapi)"; labeljust="l";
        color="#369"; fontcolor="#369"; style="rounded";
        res    [label="$resource('/articles/:id')",    color="#369"];
        parse  [label="angular-jsonapi\nparse + index by (type,id)", color="#369"];
        model  [label="Article model\n.author -> Person\n.comments -> [Comment]", color="#369"];
        view   [label="ng-repeat\n{{ article.author.name }}", color="#369"];
        res -> parse -> model -> view [color="#369"];
    }

    d_type    -> parse [color="#aaa"];
    i_author  -> parse [color="#aaa", style=dotted];
    i_comment1 -> parse [color="#aaa", style=dotted];
    i_comment2 -> parse [color="#aaa", style=dotted];
}