Circular Process Diagram - Copy this Html, Bootstrap Component to your project

In the image, the four stages in the circular diagram are connected by individual arrows, which create the visual impression of a near-circle but without forming a perfect one. Here’s a detailed breakdown of the positions and directions of the arrows: Arrow Placement and Direction From Business Strategy (事業戦略) to Experience Design (体験設計): The first arrow starts at the top-right of the circle labeled 事業戦略 (Business Strategy) and curves downward toward the circle labeled 体験設計 (Experience Design), which is positioned diagonally down to the right. The arrow has a slight curve to the right, moving smoothly toward the next stage, indicating a directional flow from 事業戦略 to 体験設計. From Experience Design (体験設計) to Development (開発): The second arrow begins at the top-right of the 体験設計 (Experience Design) circle and curves upward, heading diagonally toward 開発 (Development), which is positioned directly above it. This arrow curves gently upward to the right, continuing the clockwise movement from 体験設計 to 開発. From Development (開発) to Growth Foundation Construction (成長基盤構築): The third arrow originates at the right side of the 開発 (Development) circle and curves downward, moving diagonally left toward 成長基盤構築 (Growth Foundation), which is placed directly below it. This arrow again follows a curved path, directing the viewer's eye from 開発 to 成長基盤構築. From Growth Foundation (成長基盤構築) to Business Strategy (事業戦略): The final arrow starts from the top-left side of the 成長基盤構築 (Growth Foundation) circle and curves leftward, pointing diagonally up to connect back to the starting circle, 事業戦略 (Business Strategy). The arrow curves smoothly upwards, completing the cycle and reinforcing the idea of a continuous process. Appearance of Near-Circle While the four arrows together form a shape that closely resembles a circle, it is not a perfect one because the arrows are curved and individually connect the four stages. Each arrow arcs in a direction leading to the next stage, creating a sense of flow and movement without overlapping with the circles themselves. The arrows carefully avoid crossing through any of the text or content in the circles, ensuring the design remains clean and unobstructed. Start and End of Arrows Each arrow begins just outside the perimeter of one circle and ends just before the next circle, maintaining enough space so that none of the arrows overlap or intersect the circles. This separation emphasizes the directional flow without cluttering the individual stages. Summary of the Flow The arrows connect the four stages in a clockwise direction, visually representing a process that progresses from one stage to the next. However, since the arrows are individual entities and not connected in a continuous circular line, they give the impression of a cycle while maintaining distinct directional points between stages. This makes the diagram feel like a cycle but not a closed loop, allowing each stage to stand out.