From 1344b1d437208d0c0c0cdb743ef73990e18367d3 Mon Sep 17 00:00:00 2001 From: Marjukka Niinioja Date: Thu, 11 Dec 2025 16:11:20 +0200 Subject: [PATCH 1/3] Add CanvasCreator embeds for canvas documentation --- .../resources/api-business-model-canvas.mdx | 20 +++++++++++++++++++ .../api-value-proposition-canvas.mdx | 20 +++++++++++++++++++ .../docs/resources/business-impact-canvas.mdx | 20 +++++++++++++++++++ .../docs/resources/capacity-canvas.mdx | 20 +++++++++++++++++++ .../resources/customer-journey-canvas.mdx | 20 +++++++++++++++++++ src/content/docs/resources/domain-canvas.mdx | 20 +++++++++++++++++++ src/content/docs/resources/event-canvas.mdx | 20 +++++++++++++++++++ src/content/docs/resources/graphql-canvas.mdx | 20 +++++++++++++++++++ .../docs/resources/interaction-canvas.mdx | 20 +++++++++++++++++++ .../docs/resources/locations-canvas.mdx | 20 +++++++++++++++++++ src/content/docs/resources/rest-canvas.mdx | 20 +++++++++++++++++++ 11 files changed, 220 insertions(+) create mode 100644 src/content/docs/resources/api-business-model-canvas.mdx create mode 100644 src/content/docs/resources/api-value-proposition-canvas.mdx create mode 100644 src/content/docs/resources/business-impact-canvas.mdx create mode 100644 src/content/docs/resources/capacity-canvas.mdx create mode 100644 src/content/docs/resources/customer-journey-canvas.mdx create mode 100644 src/content/docs/resources/domain-canvas.mdx create mode 100644 src/content/docs/resources/event-canvas.mdx create mode 100644 src/content/docs/resources/graphql-canvas.mdx create mode 100644 src/content/docs/resources/interaction-canvas.mdx create mode 100644 src/content/docs/resources/locations-canvas.mdx create mode 100644 src/content/docs/resources/rest-canvas.mdx diff --git a/src/content/docs/resources/api-business-model-canvas.mdx b/src/content/docs/resources/api-business-model-canvas.mdx new file mode 100644 index 0000000..12d64bc --- /dev/null +++ b/src/content/docs/resources/api-business-model-canvas.mdx @@ -0,0 +1,20 @@ +--- +title: API Business Model Canvas +description: Model the viability, costs, and value streams for an API product. +canvasId: apiBusinessModelCanvas +--- + +import CanvasCreator from '../../components/CanvasCreator.astro'; + +const { canvasId } = frontmatter; + +The API Business Model Canvas helps you map value propositions, customer segments, revenue streams, and supporting capabilities for an API product. Use it to validate business viability before investing further in design or implementation. + +{canvasId ? ( + +) : ( +

+ Open the canvas in Canvas Creator at{' '} + canvascreator.apiopscycles.com. +

+)} diff --git a/src/content/docs/resources/api-value-proposition-canvas.mdx b/src/content/docs/resources/api-value-proposition-canvas.mdx new file mode 100644 index 0000000..abb3e37 --- /dev/null +++ b/src/content/docs/resources/api-value-proposition-canvas.mdx @@ -0,0 +1,20 @@ +--- +title: API Value Proposition Canvas +description: Clarify the pains, gains, and jobs your API solves for consumers. +canvasId: apiValuePropositionCanvas +--- + +import CanvasCreator from '../../components/CanvasCreator.astro'; + +const { canvasId } = frontmatter; + +Use the API Value Proposition Canvas to align API capabilities with consumer needs. Capture the jobs to be done, pains, gains, and supporting features so you can prioritize a compelling, validated offering. + +{canvasId ? ( + +) : ( +

+ Open the canvas in Canvas Creator at{' '} + canvascreator.apiopscycles.com. +

+)} diff --git a/src/content/docs/resources/business-impact-canvas.mdx b/src/content/docs/resources/business-impact-canvas.mdx new file mode 100644 index 0000000..240daa9 --- /dev/null +++ b/src/content/docs/resources/business-impact-canvas.mdx @@ -0,0 +1,20 @@ +--- +title: Business Impact Canvas +description: Assess risks, mitigations, and value impacts across the API platform. +canvasId: businessImpactCanvas +--- + +import CanvasCreator from '../../components/CanvasCreator.astro'; + +const { canvasId } = frontmatter; + +The Business Impact Canvas highlights risks, mitigation actions, and expected business outcomes for your API initiatives. Use it to make informed trade-offs and ensure governance teams stay aligned. + +{canvasId ? ( + +) : ( +

+ Open the canvas in Canvas Creator at{' '} + canvascreator.apiopscycles.com. +

+)} diff --git a/src/content/docs/resources/capacity-canvas.mdx b/src/content/docs/resources/capacity-canvas.mdx new file mode 100644 index 0000000..a89896a --- /dev/null +++ b/src/content/docs/resources/capacity-canvas.mdx @@ -0,0 +1,20 @@ +--- +title: Capacity Canvas +description: Plan scalability, throughput, and operational readiness for APIs. +canvasId: capacityCanvas +--- + +import CanvasCreator from '../../components/CanvasCreator.astro'; + +const { canvasId } = frontmatter; + +Use the Capacity Canvas to outline performance targets, scaling approaches, and operational safeguards. It helps teams plan capacity that matches expected demand and resilience requirements. + +{canvasId ? ( + +) : ( +

+ Open the canvas in Canvas Creator at{' '} + canvascreator.apiopscycles.com. +

+)} diff --git a/src/content/docs/resources/customer-journey-canvas.mdx b/src/content/docs/resources/customer-journey-canvas.mdx new file mode 100644 index 0000000..fffbebc --- /dev/null +++ b/src/content/docs/resources/customer-journey-canvas.mdx @@ -0,0 +1,20 @@ +--- +title: Customer Journey Canvas +description: Map user journeys and needs before committing to specific APIs. +canvasId: customerJourneyCanvas +--- + +import CanvasCreator from '../../components/CanvasCreator.astro'; + +const { canvasId } = frontmatter; + +The Customer Journey Canvas captures the steps, needs, and pain points of your target users. Use it to validate where APIs add value and to prioritize improvements along the journey. + +{canvasId ? ( + +) : ( +

+ Open the canvas in Canvas Creator at{' '} + canvascreator.apiopscycles.com. +

+)} diff --git a/src/content/docs/resources/domain-canvas.mdx b/src/content/docs/resources/domain-canvas.mdx new file mode 100644 index 0000000..55e2fe8 --- /dev/null +++ b/src/content/docs/resources/domain-canvas.mdx @@ -0,0 +1,20 @@ +--- +title: Domain Canvas +description: Align shared terminology and domain boundaries for your APIs. +canvasId: domainCanvas +--- + +import CanvasCreator from '../../components/CanvasCreator.astro'; + +const { canvasId } = frontmatter; + +Use the Domain Canvas to capture core concepts, bounded contexts, and ubiquitous language. It ensures teams share a common model before designing APIs and contracts. + +{canvasId ? ( + +) : ( +

+ Open the canvas in Canvas Creator at{' '} + canvascreator.apiopscycles.com. +

+)} diff --git a/src/content/docs/resources/event-canvas.mdx b/src/content/docs/resources/event-canvas.mdx new file mode 100644 index 0000000..742b606 --- /dev/null +++ b/src/content/docs/resources/event-canvas.mdx @@ -0,0 +1,20 @@ +--- +title: Event Canvas +description: Capture event flows and behaviors for event-driven APIs. +canvasId: eventCanvas +--- + +import CanvasCreator from '../../components/CanvasCreator.astro'; + +const { canvasId } = frontmatter; + +The Event Canvas helps you design event-driven interactions, producers, consumers, and schemas. Use it to validate event shapes and responsibilities before implementing streaming APIs. + +{canvasId ? ( + +) : ( +

+ Open the canvas in Canvas Creator at{' '} + canvascreator.apiopscycles.com. +

+)} diff --git a/src/content/docs/resources/graphql-canvas.mdx b/src/content/docs/resources/graphql-canvas.mdx new file mode 100644 index 0000000..67a1ffc --- /dev/null +++ b/src/content/docs/resources/graphql-canvas.mdx @@ -0,0 +1,20 @@ +--- +title: GraphQL Canvas +description: Plan GraphQL schemas, query patterns, and resolvers. +canvasId: graphqlCanvas +--- + +import CanvasCreator from '../../components/CanvasCreator.astro'; + +const { canvasId } = frontmatter; + +Use the GraphQL Canvas to outline types, relationships, and resolver responsibilities. It keeps your schema design aligned with client use cases and backend capabilities. + +{canvasId ? ( + +) : ( +

+ Open the canvas in Canvas Creator at{' '} + canvascreator.apiopscycles.com. +

+)} diff --git a/src/content/docs/resources/interaction-canvas.mdx b/src/content/docs/resources/interaction-canvas.mdx new file mode 100644 index 0000000..8d59643 --- /dev/null +++ b/src/content/docs/resources/interaction-canvas.mdx @@ -0,0 +1,20 @@ +--- +title: Interaction Canvas +description: Design interaction patterns between consumers and APIs. +canvasId: interactionCanvas +--- + +import CanvasCreator from '../../components/CanvasCreator.astro'; + +const { canvasId } = frontmatter; + +The Interaction Canvas helps teams align on flows, responsibilities, and touchpoints across systems. Use it to validate how consumers will interact with your APIs or services. + +{canvasId ? ( + +) : ( +

+ Open the canvas in Canvas Creator at{' '} + canvascreator.apiopscycles.com. +

+)} diff --git a/src/content/docs/resources/locations-canvas.mdx b/src/content/docs/resources/locations-canvas.mdx new file mode 100644 index 0000000..ab1bb78 --- /dev/null +++ b/src/content/docs/resources/locations-canvas.mdx @@ -0,0 +1,20 @@ +--- +title: Locations Canvas +description: Plan where data, services, and workloads live across environments. +canvasId: locationsCanvas +--- + +import CanvasCreator from '../../components/CanvasCreator.astro'; + +const { canvasId } = frontmatter; + +Use the Locations Canvas to document data residency, deployment targets, and latency considerations. It keeps platform and product teams aligned on where critical components will run. + +{canvasId ? ( + +) : ( +

+ Open the canvas in Canvas Creator at{' '} + canvascreator.apiopscycles.com. +

+)} diff --git a/src/content/docs/resources/rest-canvas.mdx b/src/content/docs/resources/rest-canvas.mdx new file mode 100644 index 0000000..ddb9059 --- /dev/null +++ b/src/content/docs/resources/rest-canvas.mdx @@ -0,0 +1,20 @@ +--- +title: REST Canvas +description: Capture resources, operations, and contracts for RESTful APIs. +canvasId: restCanvas +--- + +import CanvasCreator from '../../components/CanvasCreator.astro'; + +const { canvasId } = frontmatter; + +Use the REST Canvas to define resources, representations, and lifecycle considerations for REST APIs. It keeps teams aligned on boundaries, error handling, and performance expectations. + +{canvasId ? ( + +) : ( +

+ Open the canvas in Canvas Creator at{' '} + canvascreator.apiopscycles.com. +

+)} From 0942d1a8c4a5febe42d6129b4aa02acac887d1b6 Mon Sep 17 00:00:00 2001 From: Marjukka Niinioja Date: Thu, 11 Dec 2025 19:04:19 +0200 Subject: [PATCH 2/3] Fix CanvasCreator imports for canvas docs --- .../resources/api-business-model-canvas.mdx | 50 +++++++++++++----- .../api-value-proposition-canvas.mdx | 47 ++++++++++++----- .../docs/resources/business-impact-canvas.mdx | 49 +++++++++++++----- .../docs/resources/capacity-canvas.mdx | 48 ++++++++++++----- .../resources/customer-journey-canvas.mdx | 50 +++++++++++++----- src/content/docs/resources/domain-canvas.mdx | 43 +++++++++++----- src/content/docs/resources/event-canvas.mdx | 47 ++++++++++++----- src/content/docs/resources/graphql-canvas.mdx | 51 ++++++++++++++----- .../docs/resources/interaction-canvas.mdx | 48 ++++++++++++----- .../docs/resources/locations-canvas.mdx | 4 +- src/content/docs/resources/rest-canvas.mdx | 47 ++++++++++++----- 11 files changed, 362 insertions(+), 122 deletions(-) diff --git a/src/content/docs/resources/api-business-model-canvas.mdx b/src/content/docs/resources/api-business-model-canvas.mdx index 12d64bc..5af7262 100644 --- a/src/content/docs/resources/api-business-model-canvas.mdx +++ b/src/content/docs/resources/api-business-model-canvas.mdx @@ -1,20 +1,46 @@ --- title: API Business Model Canvas -description: Model the viability, costs, and value streams for an API product. +slug: resources/api-business-model-canvas +sidebar: + order: 3 +icon: dashboard-outline +category: canvas canvasId: apiBusinessModelCanvas +image: /assets/resource/Canvas_apiBusinessModelCanvas.png --- -import CanvasCreator from '../../components/CanvasCreator.astro'; +import { Aside } from '@astrojs/starlight/components'; +import CanvasCreator from '../../../components/CanvasCreator.astro'; -const { canvasId } = frontmatter; +Strategically assess API business viability by mapping value propositions, consumer segments, and key resources. -The API Business Model Canvas helps you map value propositions, customer segments, revenue streams, and supporting capabilities for an API product. Use it to validate business viability before investing further in design or implementation. +## Outcomes -{canvasId ? ( - -) : ( -

- Open the canvas in Canvas Creator at{' '} - canvascreator.apiopscycles.com. -

-)} +- Clear business strategy for APIs + +## How it works + +![API Business Model Canvas](../../../assets/resource/Canvas_apiBusinessModelCanvas.svg) + +[SVG](../../../assets/resource/Canvas_apiBusinessModelCanvas.svg) | [PNG](../../../assets/resource/Canvas_apiBusinessModelCanvas.png) | [JSON](../../../assets/resource/Canvas_apiBusinessModelCanvas.json) + +### Steps + +1. Summarize the API's value proposition +2. Define consumer segments +3. Identify developer relations strategies +4. Map distribution channels +5. document key resources and activities +6. Identify key partners and stakeholders +7. Highlight benefits and costs + + + + + + diff --git a/src/content/docs/resources/api-value-proposition-canvas.mdx b/src/content/docs/resources/api-value-proposition-canvas.mdx index abb3e37..1be6bb8 100644 --- a/src/content/docs/resources/api-value-proposition-canvas.mdx +++ b/src/content/docs/resources/api-value-proposition-canvas.mdx @@ -1,20 +1,43 @@ --- title: API Value Proposition Canvas -description: Clarify the pains, gains, and jobs your API solves for consumers. +slug: resources/api-value-proposition-canvas +sidebar: + order: 2 +icon: dashboard-outline +category: canvas canvasId: apiValuePropositionCanvas +image: /assets/resource/Canvas_apiValuePropositionCanvas.png --- -import CanvasCreator from '../../components/CanvasCreator.astro'; +import { Aside } from '@astrojs/starlight/components'; +import CanvasCreator from '../../../components/CanvasCreator.astro'; -const { canvasId } = frontmatter; +Align API features with user needs by mapping tasks, pains, and gains to API products. -Use the API Value Proposition Canvas to align API capabilities with consumer needs. Capture the jobs to be done, pains, gains, and supporting features so you can prioritize a compelling, validated offering. +## Outcomes -{canvasId ? ( - -) : ( -

- Open the canvas in Canvas Creator at{' '} - canvascreator.apiopscycles.com. -

-)} +- Focused feature development + +## How it works + +![API Value Proposition Canvas](../../../assets/resource/Canvas_apiValuePropositionCanvas.svg) + +[SVG](../../../assets/resource/Canvas_apiValuePropositionCanvas.svg) | [PNG](../../../assets/resource/Canvas_apiValuePropositionCanvas.png) | [JSON](../../../assets/resource/Canvas_apiValuePropositionCanvas.json) + +### Steps + +1. List user journey tasks +2. Identify features delivering expected gains +3. Define features addressing challenges +4. Map features to API products + + + + + + diff --git a/src/content/docs/resources/business-impact-canvas.mdx b/src/content/docs/resources/business-impact-canvas.mdx index 240daa9..56b082b 100644 --- a/src/content/docs/resources/business-impact-canvas.mdx +++ b/src/content/docs/resources/business-impact-canvas.mdx @@ -1,20 +1,45 @@ --- title: Business Impact Canvas -description: Assess risks, mitigations, and value impacts across the API platform. +slug: resources/business-impact-canvas +sidebar: + order: 4 +icon: dashboard-outline +category: canvas canvasId: businessImpactCanvas +image: /assets/resource/Canvas_businessImpactCanvas.png --- -import CanvasCreator from '../../components/CanvasCreator.astro'; +import { Aside } from '@astrojs/starlight/components'; +import CanvasCreator from '../../../components/CanvasCreator.astro'; -const { canvasId } = frontmatter; +Design a scalable and secure API platform architecture that meets business and technical requirements. -The Business Impact Canvas highlights risks, mitigation actions, and expected business outcomes for your API initiatives. Use it to make informed trade-offs and ensure governance teams stay aligned. +## Outcomes -{canvasId ? ( - -) : ( -

- Open the canvas in Canvas Creator at{' '} - canvascreator.apiopscycles.com. -

-)} +- Scalable API infrastructure + +## How it works + +![Business Impact Canvas](../../../assets/resource/Canvas_businessImpactCanvas.svg) + +[SVG](../../../assets/resource/Canvas_businessImpactCanvas.svg) | [PNG](../../../assets/resource/Canvas_businessImpactCanvas.png) | [JSON](../../../assets/resource/Canvas_businessImpactCanvas.json) + +### Steps + +1. Availability Risks: Identify risks and impacts. +2. Ways to Mitigate Availability Risks: Define mitigation measures. +3. Security Risks: Document security-related risks. +4. Ways to Mitigate Security Risks: Propose strategies to mitigate security risks. +5. Data Risks: Identify risks to data accuracy or availability. +6. Ways to Mitigate Data Risks: Plan strategies to address data risks. + + + + + + diff --git a/src/content/docs/resources/capacity-canvas.mdx b/src/content/docs/resources/capacity-canvas.mdx index a89896a..34b3129 100644 --- a/src/content/docs/resources/capacity-canvas.mdx +++ b/src/content/docs/resources/capacity-canvas.mdx @@ -1,20 +1,44 @@ --- title: Capacity Canvas -description: Plan scalability, throughput, and operational readiness for APIs. +slug: resources/capacity-canvas +sidebar: + order: 7 +icon: dashboard-outline +category: canvas canvasId: capacityCanvas +image: /assets/resource/Canvas_capacityCanvas.png --- -import CanvasCreator from '../../components/CanvasCreator.astro'; +import { Aside } from '@astrojs/starlight/components'; +import CanvasCreator from '../../../components/CanvasCreator.astro'; -const { canvasId } = frontmatter; +Plan API capacity to meet current and future business demands, ensuring scalability and performance. -Use the Capacity Canvas to outline performance targets, scaling approaches, and operational safeguards. It helps teams plan capacity that matches expected demand and resilience requirements. +## Outcomes -{canvasId ? ( - -) : ( -

- Open the canvas in Canvas Creator at{' '} - canvascreator.apiopscycles.com. -

-)} +- Aligned API capacity with business volumes + +## How it works + +![Capacity Canvas](../../../assets/resource/Canvas_capacityCanvas.svg) + +[SVG](../../../assets/resource/Canvas_capacityCanvas.svg) | [PNG](../../../assets/resource/Canvas_capacityCanvas.png) | [JSON](../../../assets/resource/Canvas_capacityCanvas.json) + +### Steps + +1. Document current business volumes +2. Forecast future consumption trends +3. Plan for peak load and availability requirements +4. Define caching and rate-limiting strategies +5. Propose scaling strategies + + + + + + diff --git a/src/content/docs/resources/customer-journey-canvas.mdx b/src/content/docs/resources/customer-journey-canvas.mdx index fffbebc..0a1bff2 100644 --- a/src/content/docs/resources/customer-journey-canvas.mdx +++ b/src/content/docs/resources/customer-journey-canvas.mdx @@ -1,20 +1,46 @@ --- title: Customer Journey Canvas -description: Map user journeys and needs before committing to specific APIs. +slug: resources/customer-journey-canvas +sidebar: + order: 1 +icon: dashboard-outline +category: canvas canvasId: customerJourneyCanvas +image: /assets/resource/Canvas_customerJourneyCanvas.png --- -import CanvasCreator from '../../components/CanvasCreator.astro'; +import { Aside } from '@astrojs/starlight/components'; +import CanvasCreator from '../../../components/CanvasCreator.astro'; -const { canvasId } = frontmatter; +Map customer journeys to identify needs and pain points, enhancing API design and user experience. -The Customer Journey Canvas captures the steps, needs, and pain points of your target users. Use it to validate where APIs add value and to prioritize improvements along the journey. +## Outcomes -{canvasId ? ( - -) : ( -

- Open the canvas in Canvas Creator at{' '} - canvascreator.apiopscycles.com. -

-)} +- Improved customer understanding + +## How it works + +![Customer Journey Canvas](../../../assets/resource/Canvas_customerJourneyCanvas.svg) + +[SVG](../../../assets/resource/Canvas_customerJourneyCanvas.svg) | [PNG](../../../assets/resource/Canvas_customerJourneyCanvas.png) | [JSON](../../../assets/resource/Canvas_customerJourneyCanvas.json) + +### Steps + +1. Define customer persona +2. Identify triggers for the journey +3. Describe the journey's end +4. Map journey steps with inputs/outputs +5. Identify customer pains +6. Summarize customer gains +7. Define necessary inputs and resulting outputs +8. Define API interactions for each step + + + + + + diff --git a/src/content/docs/resources/domain-canvas.mdx b/src/content/docs/resources/domain-canvas.mdx index 55e2fe8..f247b80 100644 --- a/src/content/docs/resources/domain-canvas.mdx +++ b/src/content/docs/resources/domain-canvas.mdx @@ -1,20 +1,39 @@ --- title: Domain Canvas -description: Align shared terminology and domain boundaries for your APIs. +slug: resources/domain-canvas +sidebar: + order: 152 +icon: dashboard-outline +category: canvas canvasId: domainCanvas +image: /assets/resource/Canvas_domainCanvas.png --- -import CanvasCreator from '../../components/CanvasCreator.astro'; +import { Aside } from '@astrojs/starlight/components'; +import CanvasCreator from '../../../components/CanvasCreator.astro'; -const { canvasId } = frontmatter; +A modeling tool to define and communicate the key entities and relationships in your domain, ensuring semantic consistency across APIs. -Use the Domain Canvas to capture core concepts, bounded contexts, and ubiquitous language. It ensures teams share a common model before designing APIs and contracts. +## Outcomes -{canvasId ? ( - -) : ( -

- Open the canvas in Canvas Creator at{' '} - canvascreator.apiopscycles.com. -

-)} +- Better understanding of domain canvas principles + +## How it works + +![Domain Canvas](../../../assets/resource/Canvas_domainCanvas.svg) + +[SVG](../../../assets/resource/Canvas_domainCanvas.svg) | [PNG](../../../assets/resource/Canvas_domainCanvas.png) | [JSON](../../../assets/resource/Canvas_domainCanvas.json) + +### Steps + +1. Define core entities, their attributes, and relationships to create a shared conceptual understanding across APIs. + + + + + + diff --git a/src/content/docs/resources/event-canvas.mdx b/src/content/docs/resources/event-canvas.mdx index 742b606..c3517c0 100644 --- a/src/content/docs/resources/event-canvas.mdx +++ b/src/content/docs/resources/event-canvas.mdx @@ -1,20 +1,43 @@ --- title: Event Canvas -description: Capture event flows and behaviors for event-driven APIs. +slug: resources/event-canvas +sidebar: + order: 12 +icon: dashboard-outline +category: canvas canvasId: eventCanvas +image: /assets/resource/Canvas_eventCanvas.png --- -import CanvasCreator from '../../components/CanvasCreator.astro'; +import { Aside } from '@astrojs/starlight/components'; +import CanvasCreator from '../../../components/CanvasCreator.astro'; -const { canvasId } = frontmatter; +Design event-driven APIs by defining events, triggers, and processing logic. -The Event Canvas helps you design event-driven interactions, producers, consumers, and schemas. Use it to validate event shapes and responsibilities before implementing streaming APIs. +## Outcomes -{canvasId ? ( - -) : ( -

- Open the canvas in Canvas Creator at{' '} - canvascreator.apiopscycles.com. -

-)} +- Defined event-driven architecture + +## How it works + +![Event Canvas](../../../assets/resource/Canvas_eventCanvas.svg) + +[SVG](../../../assets/resource/Canvas_eventCanvas.svg) | [PNG](../../../assets/resource/Canvas_eventCanvas.png) | [JSON](../../../assets/resource/Canvas_eventCanvas.json) + +### Steps + +1. Identify key events in the system +2. Define triggers for each event +3. Describe backend processing logic for events +4. Specify resulting outputs or acknowledgments + + + + + + diff --git a/src/content/docs/resources/graphql-canvas.mdx b/src/content/docs/resources/graphql-canvas.mdx index 67a1ffc..3165c5f 100644 --- a/src/content/docs/resources/graphql-canvas.mdx +++ b/src/content/docs/resources/graphql-canvas.mdx @@ -1,20 +1,47 @@ --- title: GraphQL Canvas -description: Plan GraphQL schemas, query patterns, and resolvers. +slug: resources/graphql-canvas +sidebar: + order: 11 +icon: dashboard-outline +category: canvas canvasId: graphqlCanvas +image: /assets/resource/Canvas_graphqlCanvas.png --- -import CanvasCreator from '../../components/CanvasCreator.astro'; +import { Aside } from '@astrojs/starlight/components'; +import CanvasCreator from '../../../components/CanvasCreator.astro'; -const { canvasId } = frontmatter; +Design GraphQL APIs by defining types, queries, mutations, and subscriptions. -Use the GraphQL Canvas to outline types, relationships, and resolver responsibilities. It keeps your schema design aligned with client use cases and backend capabilities. +## Outcomes -{canvasId ? ( - -) : ( -

- Open the canvas in Canvas Creator at{' '} - canvascreator.apiopscycles.com. -

-)} +- Structured GraphQL API design + +## How it works + +![GraphQL Canvas](../../../assets/resource/Canvas_graphqlCanvas.svg) + +[SVG](../../../assets/resource/Canvas_graphqlCanvas.svg) | [PNG](../../../assets/resource/Canvas_graphqlCanvas.png) | [JSON](../../../assets/resource/Canvas_graphqlCanvas.json) + +### Steps + +1. What problems are API consumers trying to solve? What data do they need? +2. Define GraphQL types and their attributes: What are the core types exposed (e.g., User, Order, Product)? +3. Map relationships between types: How do types relate to each other in nested queries? +4. Specify queries for data retrieval +5. Define mutations for data modification: What operations will modify data (e.g., create, update, delete)? +6. Outline subscriptions for real-time updates +7. Define authentication and authorization: Who can access which fields or types? +8. Consider if there are any pagination, filtering, or rate-limiting constraints + + + + + + diff --git a/src/content/docs/resources/interaction-canvas.mdx b/src/content/docs/resources/interaction-canvas.mdx index 8d59643..13bfb86 100644 --- a/src/content/docs/resources/interaction-canvas.mdx +++ b/src/content/docs/resources/interaction-canvas.mdx @@ -1,20 +1,44 @@ --- title: Interaction Canvas -description: Design interaction patterns between consumers and APIs. +slug: resources/interaction-canvas +sidebar: + order: 9 +icon: dashboard-outline +category: canvas canvasId: interactionCanvas +image: /assets/resource/Canvas_interactionCanvas.png --- -import CanvasCreator from '../../components/CanvasCreator.astro'; +import { Aside } from '@astrojs/starlight/components'; +import CanvasCreator from '../../../components/CanvasCreator.astro'; -const { canvasId } = frontmatter; +Define API interactions, workflows, and expected responses to ensure a consistent API consumer experience. -The Interaction Canvas helps teams align on flows, responsibilities, and touchpoints across systems. Use it to validate how consumers will interact with your APIs or services. +## Outcomes -{canvasId ? ( - -) : ( -

- Open the canvas in Canvas Creator at{' '} - canvascreator.apiopscycles.com. -

-)} +- Clear API interaction workflows + +## How it works + +![Interaction Canvas](../../../assets/resource/Canvas_interactionCanvas.svg) + +[SVG](../../../assets/resource/Canvas_interactionCanvas.svg) | [PNG](../../../assets/resource/Canvas_interactionCanvas.png) | [JSON](../../../assets/resource/Canvas_interactionCanvas.json) + +### Steps + +1. Map API interactions to user tasks +2. Define endpoints for each interaction +3. document inputs and outputs for each interaction +4. Specify validation rules and constraints +5. Create interaction models for CRUD, query-driven, command-driven, and event-driven interactions + + + + + + diff --git a/src/content/docs/resources/locations-canvas.mdx b/src/content/docs/resources/locations-canvas.mdx index ab1bb78..3ca4842 100644 --- a/src/content/docs/resources/locations-canvas.mdx +++ b/src/content/docs/resources/locations-canvas.mdx @@ -4,9 +4,9 @@ description: Plan where data, services, and workloads live across environments. canvasId: locationsCanvas --- -import CanvasCreator from '../../components/CanvasCreator.astro'; +import CanvasCreator from '../../../components/CanvasCreator.astro'; -const { canvasId } = frontmatter; +export const canvasId = 'locationsCanvas'; Use the Locations Canvas to document data residency, deployment targets, and latency considerations. It keeps platform and product teams aligned on where critical components will run. diff --git a/src/content/docs/resources/rest-canvas.mdx b/src/content/docs/resources/rest-canvas.mdx index ddb9059..fd5bd3f 100644 --- a/src/content/docs/resources/rest-canvas.mdx +++ b/src/content/docs/resources/rest-canvas.mdx @@ -1,20 +1,43 @@ --- title: REST Canvas -description: Capture resources, operations, and contracts for RESTful APIs. +slug: resources/rest-canvas +sidebar: + order: 10 +icon: dashboard-outline +category: canvas canvasId: restCanvas +image: /assets/resource/Canvas_restCanvas.png --- -import CanvasCreator from '../../components/CanvasCreator.astro'; +import { Aside } from '@astrojs/starlight/components'; +import CanvasCreator from '../../../components/CanvasCreator.astro'; -const { canvasId } = frontmatter; +Design APIs using RESTful principles, defining resources, verbs, and example requests and responses. -Use the REST Canvas to define resources, representations, and lifecycle considerations for REST APIs. It keeps teams aligned on boundaries, error handling, and performance expectations. +## Outcomes -{canvasId ? ( - -) : ( -

- Open the canvas in Canvas Creator at{' '} - canvascreator.apiopscycles.com. -

-)} +- Consistent RESTful API design + +## How it works + +![REST Canvas](../../../assets/resource/Canvas_restCanvas.svg) + +[SVG](../../../assets/resource/Canvas_restCanvas.svg) | [PNG](../../../assets/resource/Canvas_restCanvas.png) | [JSON](../../../assets/resource/Canvas_restCanvas.json) + +### Steps + +1. Identify key resources exposed by the API +2. Define the structure of the API resource model +3. Specify HTTP verbs used to interact with resources +4. Provide example requests and responses for each verb + + + + + + From be55cf31eb405f3b81314c1e1af0d9cea24dcee9 Mon Sep 17 00:00:00 2001 From: Marjukka Niinioja Date: Thu, 11 Dec 2025 19:25:13 +0200 Subject: [PATCH 3/3] Bundle CanvasCreator initializer via local script --- src/components/CanvasCreator.astro | 12 ++++++++---- src/scripts/init-canvascreator.js | 10 ++++++++++ 2 files changed, 18 insertions(+), 4 deletions(-) create mode 100644 src/scripts/init-canvascreator.js diff --git a/src/components/CanvasCreator.astro b/src/components/CanvasCreator.astro index 9495726..91f184b 100644 --- a/src/components/CanvasCreator.astro +++ b/src/components/CanvasCreator.astro @@ -1,4 +1,6 @@ --- +import initCanvasCreator from '../scripts/init-canvascreator.js?url'; + interface Props { canvasId: string; } @@ -7,7 +9,9 @@ const { canvasId } = Astro.props as Props; ---
- + diff --git a/src/scripts/init-canvascreator.js b/src/scripts/init-canvascreator.js new file mode 100644 index 0000000..cbd716f --- /dev/null +++ b/src/scripts/init-canvascreator.js @@ -0,0 +1,10 @@ +import canvascreator from 'canvascreator'; + +function initializeFromScriptTag(script) { + if (!script) return; + const canvasId = script.dataset.canvasId; + if (!canvasId) return; + canvascreator.initialize({ canvasId }); +} + +initializeFromScriptTag(document.currentScript);