// 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="#dbeafe", 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="#b45309"; fontcolor="#b45309"; style="rounded";
        ctrl  [label="ArticlesController#show",          color="#b45309"];
        ams   [label="ArticleSerializer\nattributes :title, :body\nhas_many :comments\nbelongs_to :author", color="#b45309"];
        adapt [label="JsonApi adapter\nrender json: @article", color="#b45309"];
        ctrl -> ams -> adapt [color="#b45309"];
    }

    // 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="#1d4ed8"; fontcolor="#1d4ed8"; style="rounded";

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

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

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

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

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

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

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

    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];
}