What is Animated Sketch Diagram?
main@keyframes and offset-path to animate flowing dots tracing system topologies like branches, merges, and feedback loops. It is designed to narrate architecture through motion rather than just decoration.repository·main·Indexed 42 days ago
https://github.com/iflytek/ifly-skillsA centralized repository of iFLYTEK AI capabilities providing reusable skills for speech, OCR, translation, and multimodal tasks. Available skills include Hyper TTS, Image Understanding, Invoice and PDF/Image OCR, Speed Transcription, Text Proofread, Machine Translation, Video Translate, Voice Clone TTS, Contract Intelligence Review, and Animated Sketch Diagram.
@keyframes and offset-path to animate flowing dots tracing system topologies like branches, merges, and feedback loops. It is designed to narrate architecture through motion rather than just decoration.The Contract Intelligence Review Skill is a scenario orchestration layer designed to coordinate the entire contract review workflow. Rather than being a single atomic API, it integrates multiple capabilities including document recognition (OCR), text extraction, clause analysis, risk detection, compliance checking, and translation to produce a structured review report.
The animated-sketch-diagram skill generates animated architecture diagrams or flowcharts in a "black ink hand-drawn doodle" style.
Visual Characteristics:
Use Cases: Use this skill when users want to visualize architecture diagrams, flowcharts, infographics, technical diagrams, comparison charts, or pipelines/workflows, especially when they mention "hand-drawn style", "doodle style", "animated diagram", or "GIF architecture diagram".
To create the signature hand-drawn (sketchy) aesthetic, do not manually simulate shaky lines. Instead, add the data-rough attribute to any static geometric shape (<rect>, <path>, <circle>, etc.).
By default, the system uses data-roughness="1.8". The rough.js and sketchify.js libraries will automatically replace these elements with jittery, hand-drawn versions upon loading.
CRITICAL EXCEPTION: Do NOT add data-rough to elements that participate in CSS animations (e.g., flowing dots, rotating gears, or drawing checkmarks). The rough.js replacement process targets static visual copies; attaching animations to the replaced elements will make them invisible.
<!-- Static shape with hand-drawn effect -->
<rect data-rough data-roughness="1.8" x="10" y="10" width="100" height="100" />
<!-- Animated element (DO NOT add data-rough) -->
<circle class="flowing-dot" cx="50" cy="50" r="5" />When performing PDF OCR, the process is asynchronous. You can monitor the status of your task using the status field in the response.
Available Statuses:
CREATE: Task created successfully.WAITING: Waiting in queue.DOING: Processing.FINISH: Completed.FAILED: Failed.ANY_FAILED: Partially completed (some pages failed).STOP: Paused.When using the --domain (or -d) flag, choose based on your use case:
imagev3: Recommended for complex understanding, detailed analysis, and sophisticated Q&A.general: Recommended for simple recognition, summarization, or scenarios where lower cost is a priority.The script supports two output formats via the --output-format flag:
text: Outputs the complete transcription text.json: Outputs a structured object containing the Task ID, status, full text, segmented results, and the raw API response.To ensure compatibility with the GIF rendering script and to guarantee seamless looping, all generated HTML files must adhere to these technical constraints:
@keyframes + offset-path) only. Do not use SMIL <animate> or JavaScript-driven animations, as the recording script relies on document.getAnimations() to capture frames.animation-duration values must be divisible by the global loop duration --loop (default is 3000ms). Animations must use infinite to ensure a seamless loop.<image> tags to avoid external URL dependencies.The proofreading service covers several categories of issues:
--raw): Outputs the decoded original JSON response from the API.The skill follows an 8-step pipeline to transform raw documents into a structured risk report: