DocOps.io Extension Server
Flexible Visualizations to supplement AsciiDoctor documents.
Flexible Visualizations to supplement AsciiDoctor documents.
Create stunning charts, buttons, planners, timelines, roadmap, and other visualizations with just a few lines of code. Lightweight, flexible, and powerful.
Add the DocOps Extension Server to a project to create beautiful visualizations in an AsciiDoctor document. Follow these steps to get started:
<dependency>
<groupId>io.docops</groupId>
<artifactId>docops-extension-server</artifactId>
<version>2024.00</version>
</dependency>implementation 'io.docops:docops-extension-server:2024.00'After adding the dependency to a project, the project can use the DocOps extensions to add the dependencies to the AsciiDoctor documents:
// In your Java code
import org.asciidoctor.Asciidoctor;
import org.asciidoctor.jruby.extension.spi.ExtensionRegistry;
// Initialize AsciiDoctorJ with DocOps extensions
Asciidoctor asciidoctor = Asciidoctor.Factory.create();
ExtensionRegistry.registerExtension(asciidoctor);
// Process your AsciiDoc content
String html = asciidoctor.convert(asciiDocContent, options);Check out the examples below to see the various visualizations one can create with DocOps extensions.
Create various chart types with responsive design and smooth animations.
Explore additional visualizations including callouts, metrics cards, color gradients, and tree charts.
Document and visualize architecture decisions with context, rationale, and status. (See adr.html for more examples)
[docops,adr,useDark=false,role=center]
----
title: Use Elasticsearch for Search Functionality
status: Accepted
date: 2024-05-15
context:
- Our application needs robust search capabilities across multiple data types
- We need to support full-text search with relevance ranking
- The search functionality must scale with growing data volumes
- We need to support faceted search and filtering
decision:
- We will use Elasticsearch as our search engine
- We will integrate it with our existing PostgreSQL database
- We will implement a synchronization mechanism to keep data in sync
consequences:
- Improved search performance and capabilities
- Additional infrastructure to maintain
- Need for expertise in Elasticsearch configuration and optimization
- Potential complexity in keeping data synchronized
participants:
Jane Smith (Architect), John Doe (Developer),Alice Johnson (Product Manager)
----Create a responsive bar chart with custom styling (See charts.html for more examples)
[docops,bar]
----
{
"title": "Berry Picking by Month 2024",
"yLabel": "Number of Sales",
"xLabel": "Month",
"series": [
{"label": "Jan","value": 120.0},
{"label": "Feb","value": 334.0},
{"label": "Mar","value": 455.0},
{"label": "Apr","value": 244.0},
{"label": "May","value": 256.0},
{"label": "Jun","value": 223.0}
],
"display": {"baseColor": "#4361ee","vBar": true}
}
----Live data updates with smooth animations
[docops,line]
----
title=Department Performance
width=800
smooth=true
darkMode=false
---
Sales | Jan | 40
Sales | Feb | 70
Sales | Mar | 90
Sales | Apr | 70
Sales | May | 40
Sales | Jun | 30
Sales | Jul | 60
Sales | Aug | 90
Sales | Sept | 70
Marketing | Jan | 22
Marketing | Feb | 33
Marketing | Mar | 44
Marketing | Apr | 55
Marketing | May | 66
Marketing | Jun | 77
Marketing | Jul | 88
Marketing | Aug | 109
Marketing | Sept | 110
Development | Jan | 56
Development | Feb | 65
Development | Mar | 78
Development | Apr | 72
Development | May | 56
Development | Jun | 94
Development | Jul | 86
Development | Aug | 73
Development | Sept | 70
----Create customizable status badges and shields for AsciiDoctor documentation. (See shield.html for more examples)
[docops,badge]
----
Made With|Kotlin||#06133b|#6fc441|<Kotlin>|#fcfcfc
JVM|Runtime||#acacac|#3B1E54|<Java>|#fcfcfc
AsciiDoctor|Documentation||#acacac|#4CC9FE|<asciidoctor>|#fcfcfc
----Create interactive hexagonal buttons with connecting lines (See buttons.html for more examples)
[docops,buttons]
----
{
"buttons": [
{
"label": "Amazon",
"link": "https://www.amazon.com",
"description": "E-commerce, cloud computing, digital streaming",
"embeddedImage": {"ref": "<Amazon>"}
},
{
"label": "Apple",
"link": "https://www.apple.com",
"description": "Consumer electronics, software and services",
"embeddedImage": {"ref": "<Apple>"}
},
{
"label": "DocOps.io",
"link": "https://docops.io",
"description": "Documentation experience for developers",
"embeddedImage": {"ref": "images/docops.svg"}
}
],
"buttonType": "HEX",
"theme": {"hexLinesEnabled": true,"strokeColor": "#7695FF","colors": ["#353d4b"],"scale": 1,"columns": 3}
}
----Create flow diagrams and process maps to visualize relationships between components. (See connectors.html for more examples)
[docops,connector,useDark=false]
----
{
"connectors": [
{"text": "Engineer","description": "Creates tests"},
{"text": "Unit Tests","description": "Run Unit Tests"},
{"text": "GitHub","description": "Upload to Github"},
{"text": "Test Engine","description": "GitHub webhook plugged into engine"},
{"text": "GitHub","description": "Results stored in Github"},
{"text": "API Documentation","description": "API documentation ready for consumption"}
]
}
----Organize content with placemats and create visual project planners. (See placemat.html for more examples)
[docops,placemat,useDark=false]
----
{
"title": "System Architecture Overview",
"placeMats": [
{"name": "Frontend","legend": "UI"},
{"name": "Backend","legend": "API"},
{"name": "Database","legend": "DATA"}
],
"config": {
"legend": [
{"legend": "UI","color": "#4361ee"},
{"legend": "API","color": "#3a0ca3"},
{"legend": "DATA","color": "#7209b7"}
]}
}
----Create visual project planners with NOW/NEXT/LATER and DONE categories or custom. (See planner.html for more examples)
[docops,roadmap,useDark=false, title="Q3 Development Roadmap", scale="2.2"]
----
- now Authentication
* Implement user authentication system
* Set up CI/CD pipeline
* Create database schema
- next REST
* Develop REST API endpoints
* Build frontend components
* Implement search functionality
- later Analytics
* Add analytics dashboard
* Optimize performance
* Implement advanced features
- done Requirements
* Project requirements gathering
* Architecture design
* Technology stack selection
----Visualize release plans, roadmaps, and deployment strategies for successful product releases. (See releasestrategy.html for more examples)
[docops,release]
----
{
"title": "Product Release Strategy",
"style": "TLS", "scale": 0.5,
"releases": [
{
"type": "M1",
"date": "2023-01-15",
"goal": "Initial Planning",
"lines": [
"Define release scope and objectives",
"Identify key features and enhancements",
"Create detailed project timeline",
"Allocate resources and responsibilities"
]
},
{
"type": "M2",
"date": "2023-02-15",
"goal": "Development Phase",
"lines": [
"Code development and unit testing",
"Integration of components",
"Documentation updates",
"Internal code reviews"
]
},
{
"type": "RC1",
"date": "2023-03-15",
"goal": "Testing Phase",
"lines": [
"Functional testing",
"Performance testing",
"Security testing",
"User acceptance testing"
]
},
{
"type": "GA",
"date": "2023-04-15",
"goal": "Deployment Phase",
"lines": [
"Final approval and sign-off",
"Production deployment",
"Post-deployment verification",
"Monitoring and support"
]
}
]
}
----Create visual scorecards and metrics dashboards for project tracking and comparison. (See scorecard.html for more examples)
[docops,scorecard]
----
{
"title": "Technology Comparison",
"initiativeTitle": "Current Solution",
"outcomeTitle": "Proposed Solution",
"initiativeItems": [
{"displayText":"Limited scalability"},
{"displayText":"High maintenance costs"},
{"displayText":"Manual deployment process"},
{"displayText":"Minimal monitoring capabilities"},
{"displayText":"Difficult to extend"}
],
"outcomeItems": [
{"displayText":"Highly scalable architecture"},
{"displayText":"Reduced operational costs"},
{"displayText":"Automated CI/CD pipeline"},
{"displayText":"Comprehensive monitoring"},
{"displayText":"Modular and extensible design"}
]
}
----Create interactive timelines for project history, roadmaps, and milestone tracking. (See timeline.html for more examples)
[docops,timeline,title="Project Timeline",scale="1",role="center"]
----
-
date: 1891
text: Mailbox, invented by Phillip Downing
-
date: 1923
text: The Three-Light Traffic Signal, invented by Garrett Morgan
-
date: 1932
text: Automatic Gear Shift, invented by Richard Spikes
date: July 23rd, 2023
text: DocOps extension Server releases a new feature, Timeline Maker
for [[https://github.com/asciidoctor/asciidoctorj asciidoctorj]]. With a simple text markup block you can
create very powerful timeline images. Enjoy!
-
date: August 15th, 2023
text: DocOps.io revamping website with updated documentation. All
our work will be updated with latest documentation for Panels,
for extension server are the various plug-ing for asciidoctorj.
-
date: September 1st, 2023
text: DocOps.io will begin work on revamping the asciidoctorj converter.
With the asciidoctorj 3.0.0 release coming we will need to migrate
custom plug-ins to the new version.
-
date: October 18th, 2023
text: Time to reimagine the future. Is it possible
to write a lexer parser for custom language?
-
date: December 11th, 2023
text: Annual start of vacation, time to relax
and plugin the controller.
-
date: 01/01/2024
text: First entry where we show text is wrapping or not and the [[https://roach.gy roach.gy]] aligning properly
----